完善自定义登录框功能逻辑

login-base/src/main/java/ink/wgink/login/base/consts/IUserCenterConst.java

@@ -81,6 +81,10 @@ public interface IUserCenterConst {
      * 登录框位置
      */
     String LOGIN_BOX_POSITION = "loginBoxPosition";
+    /**
+     * 登录表单action
+     */
+    String LOGIN_FORM_ACTION = "loginFormAction";
     /**
      * 菜单模式
      */

login-base/src/main/java/ink/wgink/login/base/controller/api/config/ConfigController.java

@@ -4,7 +4,7 @@ import ink.wgink.annotation.CheckRequestBodyAnnotation;
 import ink.wgink.exceptions.ParamsException;
 import ink.wgink.interfaces.consts.ISystemConstant;
 import ink.wgink.login.base.consts.IUserCenterConst;
-import ink.wgink.login.base.pojo.vos.ConfigVO;
+import ink.wgink.login.base.pojo.vos.config.ConfigVO;
 import ink.wgink.login.base.service.config.IConfigService;
 import ink.wgink.pojo.result.ErrorResult;
 import ink.wgink.pojo.result.SuccessResult;

login-base/src/main/java/ink/wgink/login/base/controller/api/login/LoginFormController.java

@@ -0,0 +1,124 @@
+package ink.wgink.login.base.controller.api.login;
+
+import ink.wgink.annotation.CheckRequestBodyAnnotation;
+import ink.wgink.common.base.DefaultBaseController;
+import ink.wgink.interfaces.consts.ISystemConstant;
+import ink.wgink.login.base.pojo.dtos.login.LoginFormDTO;
+import ink.wgink.login.base.pojo.vos.login.LoginFormVO;
+import ink.wgink.login.base.service.login.ILoginFormService;
+import ink.wgink.pojo.ListPage;
+import ink.wgink.pojo.result.ErrorResult;
+import ink.wgink.pojo.result.SuccessResult;
+import ink.wgink.pojo.result.SuccessResultList;
+import io.swagger.annotations.*;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Arrays;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * @ClassName: LoginFormController
+ * @Description: 登录表单
+ * @Author: wanggeng
+ * @Date: 2021/7/29 4:06 下午
+ * @Version: 1.0
+ */
+@Api(tags = ISystemConstant.API_TAGS_SYSTEM_PREFIX + "登录表单")
+@RestController
+@RequestMapping(ISystemConstant.API_PREFIX + "/login-form")
+public class LoginFormController extends DefaultBaseController {
+
+    @Autowired
+    private ILoginFormService loginFormService;
+    
+    @ApiOperation(value = "新增登录Form", notes = "新增登录Form接口")
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @PostMapping("save")
+    @CheckRequestBodyAnnotation
+    public SuccessResult save(@RequestBody LoginFormVO loginFormVO) {
+        loginFormService.save(loginFormVO);
+        return new SuccessResult();
+    }
+
+    @ApiOperation(value = "删除登录Form", notes = "删除登录Form接口")
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "ids", value = "登录FormID列表，用下划线分隔", paramType = "path")
+    })
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @DeleteMapping("remove/{ids}")
+    public SuccessResult remove(@PathVariable("ids") String ids) {
+        loginFormService.remove(Arrays.asList(ids.split("\\_")));
+        return new SuccessResult();
+    }
+
+    @ApiOperation(value = "修改登录Form", notes = "修改登录Form接口")
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "loginFormId", value = "登录FormID", paramType = "path"),
+    })
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @PutMapping("update/{loginFormId}")
+    @CheckRequestBodyAnnotation
+    public SuccessResult update(@PathVariable("loginFormId") String loginFormId, @RequestBody LoginFormVO loginFormVO) {
+        loginFormService.update(loginFormId, loginFormVO);
+        return new SuccessResult();
+    }
+
+    @ApiOperation(value = "激活登录Form", notes = "激活登录Form接口")
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "loginFormId", value = "登录FormID", paramType = "path"),
+    })
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @PutMapping("update-active/{loginFormId}")
+    public SuccessResult updateActive(@PathVariable("loginFormId") String loginFormId) {
+        loginFormService.updateActive(loginFormId);
+        return new SuccessResult();
+    }
+
+    @ApiOperation(value = "取消激活登录Form", notes = "取消激活登录Form接口")
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "loginFormId", value = "登录FormID", paramType = "path"),
+    })
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @PutMapping("update-un-active/{loginFormId}")
+    public SuccessResult updateUnActive(@PathVariable("loginFormId") String loginFormId) {
+        loginFormService.updateUnActive(loginFormId);
+        return new SuccessResult();
+    }
+
+    @ApiOperation(value = "登录Form列表", notes = "登录Form列表接口")
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @GetMapping("list")
+    public List<LoginFormDTO> list() {
+        Map<String, Object> params = requestParams();
+        return loginFormService.list(params);
+    }
+
+    @ApiOperation(value = "登录Form分页列表", notes = "登录Form分页列表接口")
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "page", value = "当前页码", paramType = "query", dataType = "int", defaultValue = "1"),
+            @ApiImplicitParam(name = "rows", value = "显示数量", paramType = "query", dataType = "int", defaultValue = "20"),
+            @ApiImplicitParam(name = "keywords", value = "关键字", paramType = "query", dataType = "String"),
+            @ApiImplicitParam(name = "startTime", value = "开始时间", paramType = "query", dataType = "String"),
+            @ApiImplicitParam(name = "endTime", value = "结束时间", paramType = "query", dataType = "String")
+    })
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @GetMapping("listpage")
+    public SuccessResultList<List<LoginFormDTO>> listPage(ListPage page) {
+        Map<String, Object> params = requestParams();
+        page.setParams(params);
+        return loginFormService.listPage(page);
+    }
+
+    @ApiOperation(value = "登录Form详情", notes = "登录Form详情接口")
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "loginFormId", value = "登录FormID", paramType = "path")
+    })
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @GetMapping("get/{loginFormId}")
+    public LoginFormDTO getUser(@PathVariable("loginFormId") String loginFormId) {
+        return loginFormService.get(loginFormId);
+    }
+    
+}

login-base/src/main/java/ink/wgink/login/base/controller/route/OAuthRouteController.java

@@ -3,6 +3,8 @@ package ink.wgink.login.base.controller.route;
 import ink.wgink.interfaces.consts.ISystemConstant;
 import ink.wgink.login.base.consts.IUserCenterConst;
 import ink.wgink.login.base.manager.ConfigManager;
+import ink.wgink.login.base.service.login.ILoginFormService;
+import ink.wgink.properties.BaseProperties;
 import ink.wgink.properties.ServerProperties;
 import ink.wgink.util.verification.code.Captcha;
 import ink.wgink.util.verification.code.GifCaptcha;
@@ -22,7 +24,6 @@ import javax.servlet.http.HttpSession;
 import java.io.IOException;
 import java.util.HashMap;
 import java.util.Map;
-import java.util.Objects;
 
 /**
  * When you feel like quitting. Think about why you started
@@ -40,6 +41,10 @@ public class OAuthRouteController {
 
     @Autowired
     private ServerProperties serverProperties;
+    @Autowired
+    private BaseProperties baseProperties;
+    @Autowired
+    private ILoginFormService loginFormService;
 
     /**
      * 登录
@@ -52,7 +57,6 @@ public class OAuthRouteController {
         Map<String, Object> config = ConfigManager.getInstance().getConfig();
 
         Map<String, Object> pageParams = new HashMap<>(16);
-        pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
         pageParams.put(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
         // 服务地址
         pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
@@ -63,7 +67,7 @@ public class OAuthRouteController {
         // 系统标题
         pageParams.put(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
         // 系统标题大小，默认26
-        pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
+        pageParams.put(IUserCenterConst.SYSTEM_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_TITLE_SIZE).toString()));
         // 系统子标题
         pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
         // 系统子标题大小，默认16
@@ -78,8 +82,10 @@ public class OAuthRouteController {
         pageParams.put(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
         // 登录框位置
         pageParams.put(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
+        // 登录表单action
+        pageParams.put(IUserCenterConst.LOGIN_FORM_ACTION, baseProperties.getLoginProcess().startsWith("/") ? baseProperties.getLoginProcess().substring(1) : baseProperties.getLoginProcess());
         mv.addObject("pageParams", pageParams);
-        mv.addObject("customLoginForm", "<div><form action=\"123\"></form></div>");
+        mv.addObject("customLoginForm", loginFormService.getActive());
         mv.setViewName("login");
         return mv;
     }

login-base/src/main/java/ink/wgink/login/base/controller/route/login/LoginFormRouteController.java

@@ -0,0 +1,37 @@
+package ink.wgink.login.base.controller.route.login;
+
+import ink.wgink.interfaces.consts.ISystemConstant;
+import io.swagger.annotations.Api;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.servlet.ModelAndView;
+
+/**
+ * @ClassName: LoginFormRouteController
+ * @Description: 登录form
+ * @Author: wanggeng
+ * @Date: 2021/7/29 4:25 下午
+ * @Version: 1.0
+ */
+@Api(tags = ISystemConstant.API_TAGS_SYSTEM_PREFIX + "登录form")
+@Controller
+@RequestMapping(ISystemConstant.ROUTE_PREFIX + "/login-form")
+public class LoginFormRouteController {
+
+    @GetMapping("save")
+    public ModelAndView save() {
+        return new ModelAndView("login/form/save");
+    }
+
+    @GetMapping("update")
+    public ModelAndView update() {
+        return new ModelAndView("login/form/update");
+    }
+
+    @GetMapping("list")
+    public ModelAndView list() {
+        return new ModelAndView("login/form/list");
+    }
+
+}

login-base/src/main/java/ink/wgink/login/base/dao/login/ILoginFormDao.java

@@ -0,0 +1,77 @@
+package ink.wgink.login.base.dao.login;
+
+import ink.wgink.exceptions.RemoveException;
+import ink.wgink.exceptions.SaveException;
+import ink.wgink.exceptions.SearchException;
+import ink.wgink.exceptions.UpdateException;
+import ink.wgink.interfaces.init.IInitBaseTable;
+import ink.wgink.login.base.pojo.dtos.login.LoginFormDTO;
+import org.springframework.stereotype.Repository;
+
+import java.util.List;
+import java.util.Map;
+
+/**
+ * When you feel like quitting. Think about why you started
+ * 当你想要放弃的时候，想想当初你为何开始
+ *
+ * @ClassName: ILoginFormDao
+ * @Description: 登录form表单
+ * @Author: wanggeng
+ * @Date: 2021/2/28 10:50 上午
+ * @Version: 1.0
+ */
+@Repository
+public interface ILoginFormDao extends IInitBaseTable {
+
+    /**
+     * 保存登录form表单
+     *
+     * @param params
+     * @throws SaveException
+     */
+    void save(Map<String, Object> params) throws SaveException;
+
+    /**
+     * 删除登录form表单
+     *
+     * @param params
+     * @throws RemoveException
+     */
+    void remove(Map<String, Object> params) throws RemoveException;
+
+    /**
+     * 更新登录form表单
+     *
+     * @param params
+     * @throws UpdateException
+     */
+    void update(Map<String, Object> params) throws UpdateException;
+
+    /**
+     * 修改激活状态
+     *
+     * @param params
+     * @throws UpdateException
+     */
+    void updateActive(Map<String, Object> params) throws UpdateException;
+
+    /**
+     * 登录form表单列表
+     *
+     * @param params
+     * @return
+     * @throws SearchException
+     */
+    List<LoginFormDTO> list(Map<String, Object> params) throws SearchException;
+
+    /**
+     * 登录form表单详情
+     *
+     * @param params
+     * @return
+     * @throws SearchException
+     */
+    LoginFormDTO get(Map<String, Object> params) throws SearchException;
+
+}

login-base/src/main/java/ink/wgink/login/base/pojo/dtos/login/LoginFormDTO.java

@@ -0,0 +1,114 @@
+package ink.wgink.login.base.pojo.dtos.login;
+
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+
+import java.io.Serializable;
+
+/**
+ * @ClassName: LoginFormDTO
+ * @Description: 登录form表单
+ * @Author: wanggeng
+ * @Date: 2021/7/29 3:22 下午
+ * @Version: 1.0
+ */
+@ApiModel
+public class LoginFormDTO implements Serializable {
+
+    private static final long serialVersionUID = 4369803953073409199L;
+    @ApiModelProperty(name = "loginFormId", value = "主键")
+    private String loginFormId;
+    @ApiModelProperty(name = "name", value = "名称")
+    private String name;
+    @ApiModelProperty(name = "summary", value = "说明")
+    private String summary;
+    @ApiModelProperty(name = "isActive", value = "是否激活")
+    private Integer isActive;
+    @ApiModelProperty(name = "preview", value = "预览")
+    private String preview;
+    @ApiModelProperty(name = "formHtml", value = "form代码")
+    private String formHtml;
+    @ApiModelProperty(name = "formCss", value = "form样式")
+    private String formCss;
+    @ApiModelProperty(name = "formLeftCss", value = "form左样式")
+    private String formLeftCss;
+    @ApiModelProperty(name = "formCenterCss", value = "form中样式")
+    private String formCenterCss;
+    @ApiModelProperty(name = "formRightCss", value = "form右样式")
+    private String formRightCss;
+    @ApiModelProperty(name = "gmtCreat", value = "创建时间")
+    private String gmtCreat;
+
+    public String getLoginFormId() {
+        return loginFormId == null ? "" : loginFormId.trim();
+    }
+
+    public String getName() {
+        return name == null ? "" : name.trim();
+    }
+
+    public String getSummary() {
+        return summary == null ? "" : summary.trim();
+    }
+
+    public Integer getIsActive() {
+        return isActive == null ? 0 : isActive;
+    }
+
+    public String getPreview() {
+        return preview == null ? "" : preview.trim();
+    }
+
+    public String getFormHtml() {
+        return formHtml == null ? "" : formHtml.trim();
+    }
+
+    public String getFormCss() {
+        return formCss == null ? "" : formCss.trim();
+    }
+
+    public String getFormLeftCss() {
+        return formLeftCss == null ? "" : formLeftCss.trim();
+    }
+
+    public String getFormCenterCss() {
+        return formCenterCss == null ? "" : formCenterCss.trim();
+    }
+
+    public String getFormRightCss() {
+        return formRightCss == null ? "" : formRightCss.trim();
+    }
+
+    public String getGmtCreat() {
+        return gmtCreat == null ? "" : gmtCreat.trim();
+    }
+
+    @Override
+    public String toString() {
+        final StringBuilder sb = new StringBuilder("{");
+        sb.append("\"loginFormId\":\"")
+                .append(loginFormId).append('\"');
+        sb.append(",\"name\":\"")
+                .append(name).append('\"');
+        sb.append(",\"summary\":\"")
+                .append(summary).append('\"');
+        sb.append(",\"isActive\":")
+                .append(isActive);
+        sb.append(",\"preview\":\"")
+                .append(preview).append('\"');
+        sb.append(",\"formHtml\":\"")
+                .append(formHtml).append('\"');
+        sb.append(",\"formCss\":\"")
+                .append(formCss).append('\"');
+        sb.append(",\"formLeftCss\":\"")
+                .append(formLeftCss).append('\"');
+        sb.append(",\"formCenterCss\":\"")
+                .append(formCenterCss).append('\"');
+        sb.append(",\"formRightCss\":\"")
+                .append(formRightCss).append('\"');
+        sb.append(",\"gmtCreat\":\"")
+                .append(gmtCreat).append('\"');
+        sb.append('}');
+        return sb.toString();
+    }
+}

login-base/src/main/java/ink/wgink/login/base/pojo/vos/config/ConfigVO.java

@@ -1,4 +1,4 @@
-package ink.wgink.login.base.pojo.vos;
+package ink.wgink.login.base.pojo.vos.config;
 
 
 import ink.wgink.annotation.CheckEmptyAnnotation;
@@ -69,9 +69,6 @@ public class ConfigVO {
     @ApiModelProperty(name = "menuMode", value = "菜单模式")
     @CheckEmptyAnnotation(name = "菜单模式", types = {"fixedLeft", "floatLeft"})
     private String menuMode;
-    @ApiModelProperty(name = "loginPage", value = "登录页面")
-    @CheckEmptyAnnotation(name = "登录页面", types = {"login", "login2"})
-    private String loginPage;
 
     public String getPasswordValidity() {
         return passwordValidity == null ? "" : passwordValidity.trim();
@@ -232,12 +229,4 @@ public class ConfigVO {
     public void setMenuMode(String menuMode) {
         this.menuMode = menuMode;
     }
-
-    public String getLoginPage() {
-        return loginPage == null ? "" : loginPage.trim();
-    }
-
-    public void setLoginPage(String loginPage) {
-        this.loginPage = loginPage;
-    }
 }

login-base/src/main/java/ink/wgink/login/base/pojo/vos/login/LoginFormVO.java

@@ -0,0 +1,136 @@
+package ink.wgink.login.base.pojo.vos.login;
+
+import ink.wgink.annotation.CheckEmptyAnnotation;
+import ink.wgink.annotation.CheckNumberAnnotation;
+import io.swagger.annotations.ApiModel;
+import io.swagger.annotations.ApiModelProperty;
+
+/**
+ * @ClassName: LoginFormVO
+ * @Description: 登录form表单
+ * @Author: wanggeng
+ * @Date: 2021/7/29 3:47 下午
+ * @Version: 1.0
+ */
+@ApiModel
+public class LoginFormVO {
+
+    @ApiModelProperty(name = "name", value = "名称")
+    @CheckEmptyAnnotation(name = "名称")
+    private String name;
+    @ApiModelProperty(name = "summary", value = "说明")
+    private String summary;
+    @ApiModelProperty(name = "isActive", value = "是否激活")
+    @CheckNumberAnnotation(name = "是否激活", types = {"0", "1"})
+    private Integer isActive;
+    @ApiModelProperty(name = "preview", value = "预览")
+    private String preview;
+    @ApiModelProperty(name = "formHtml", value = "form代码")
+    @CheckEmptyAnnotation(name = "form代码")
+    private String formHtml;
+    @ApiModelProperty(name = "formCss", value = "form样式")
+    private String formCss;
+    @ApiModelProperty(name = "formLeftCss", value = "form左样式")
+    private String formLeftCss;
+    @ApiModelProperty(name = "formCenterCss", value = "form中样式")
+    private String formCenterCss;
+    @ApiModelProperty(name = "formRightCss", value = "form右样式")
+    private String formRightCss;
+
+    public String getName() {
+        return name == null ? "" : name.trim();
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getSummary() {
+        return summary == null ? "" : summary.trim();
+    }
+
+    public void setSummary(String summary) {
+        this.summary = summary;
+    }
+
+    public Integer getIsActive() {
+        return isActive == null ? 0 : isActive;
+    }
+
+    public void setIsActive(Integer isActive) {
+        this.isActive = isActive;
+    }
+
+    public String getPreview() {
+        return preview == null ? "" : preview.trim();
+    }
+
+    public void setPreview(String preview) {
+        this.preview = preview;
+    }
+
+    public String getFormHtml() {
+        return formHtml == null ? "" : formHtml.trim();
+    }
+
+    public void setFormHtml(String formHtml) {
+        this.formHtml = formHtml;
+    }
+
+    public String getFormCss() {
+        return formCss == null ? "" : formCss.trim();
+    }
+
+    public void setFormCss(String formCss) {
+        this.formCss = formCss;
+    }
+
+    public String getFormLeftCss() {
+        return formLeftCss == null ? "" : formLeftCss.trim();
+    }
+
+    public void setFormLeftCss(String formLeftCss) {
+        this.formLeftCss = formLeftCss;
+    }
+
+    public String getFormCenterCss() {
+        return formCenterCss == null ? "" : formCenterCss.trim();
+    }
+
+    public void setFormCenterCss(String formCenterCss) {
+        this.formCenterCss = formCenterCss;
+    }
+
+    public String getFormRightCss() {
+        return formRightCss == null ? "" : formRightCss.trim();
+    }
+
+    public void setFormRightCss(String formRightCss) {
+        this.formRightCss = formRightCss;
+    }
+
+    @Override
+    public String toString() {
+        final StringBuilder sb = new StringBuilder("{");
+        sb.append("\"name\":\"")
+                .append(name).append('\"');
+        sb.append(",\"summary\":\"")
+                .append(summary).append('\"');
+        sb.append(",\"isActive\":")
+                .append(isActive);
+        sb.append(",\"preview\":\"")
+                .append(preview).append('\"');
+        sb.append(",\"formHtml\":\"")
+                .append(formHtml).append('\"');
+        sb.append(",\"formCss\":\"")
+                .append(formCss).append('\"');
+        sb.append(",\"formLeftCss\":\"")
+                .append(formLeftCss).append('\"');
+        sb.append(",\"formCenterCss\":\"")
+                .append(formCenterCss).append('\"');
+        sb.append(",\"formRightCss\":\"")
+                .append(formRightCss).append('\"');
+        sb.append('}');
+        return sb.toString();
+    }
+}

login-base/src/main/java/ink/wgink/login/base/service/config/IConfigService.java

@@ -1,7 +1,7 @@
 package ink.wgink.login.base.service.config;
 
 import ink.wgink.interfaces.config.ISystemConfigCheckService;
-import ink.wgink.login.base.pojo.vos.ConfigVO;
+import ink.wgink.login.base.pojo.vos.config.ConfigVO;
 
 import java.util.Map;
 

login-base/src/main/java/ink/wgink/login/base/service/config/impl/ConfigServiceImpl.java

@@ -5,7 +5,7 @@ import ink.wgink.common.base.DefaultBaseService;
 import ink.wgink.login.base.dao.config.IConfigDao;
 import ink.wgink.login.base.manager.ConfigManager;
 import ink.wgink.login.base.pojo.dtos.config.ConfigDTO;
-import ink.wgink.login.base.pojo.vos.ConfigVO;
+import ink.wgink.login.base.pojo.vos.config.ConfigVO;
 import ink.wgink.login.base.service.config.IConfigService;
 import ink.wgink.util.map.HashMapUtil;
 import org.apache.commons.lang3.StringUtils;

login-base/src/main/java/ink/wgink/login/base/service/login/ILoginFormService.java

@@ -0,0 +1,95 @@
+package ink.wgink.login.base.service.login;
+
+import ink.wgink.login.base.pojo.dtos.login.LoginFormDTO;
+import ink.wgink.login.base.pojo.vos.login.LoginFormVO;
+import ink.wgink.pojo.ListPage;
+import ink.wgink.pojo.result.SuccessResultList;
+
+import java.util.List;
+import java.util.Map;
+
+/**
+ * @ClassName: ILoginFormService
+ * @Description: 登录form表单
+ * @Author: wanggeng
+ * @Date: 2021/7/29 3:44 下午
+ * @Version: 1.0
+ */
+public interface ILoginFormService {
+
+    /**
+     * 新增登录Form
+     *
+     * @param loginFormVO
+     */
+    void save(LoginFormVO loginFormVO);
+
+    /**
+     * 删除登录Form
+     *
+     * @param loginFormIds
+     */
+    void remove(List<String> loginFormIds);
+
+    /**
+     * 修改登录Form
+     *
+     * @param loginFormId
+     * @param loginFormVO
+     */
+    void update(String loginFormId, LoginFormVO loginFormVO);
+
+    /**
+     * 激活登录Form
+     *
+     * @param loginFormId
+     */
+    void updateActive(String loginFormId);
+
+    /**
+     * 取消激活登录Form
+     *
+     * @param loginFormId
+     */
+    void updateUnActive(String loginFormId);
+
+    /**
+     * 登录Form列表
+     *
+     * @param params
+     * @return
+     */
+    List<LoginFormDTO> list(Map<String, Object> params);
+
+    /**
+     * 登录Form分页列表
+     *
+     * @param page
+     * @return
+     */
+    SuccessResultList<List<LoginFormDTO>> listPage(ListPage page);
+
+    /**
+     * 登录Form详情
+     *
+     * @param params
+     * @return
+     */
+    LoginFormDTO get(Map<String, Object> params);
+
+    /**
+     * 登录Form详情
+     *
+     * @param loginFormId
+     * @return
+     */
+    LoginFormDTO get(String loginFormId);
+
+    /**
+     * 激活的登录Form详情
+     *
+     * @return
+     */
+    LoginFormDTO getActive();
+
+}

login-base/src/main/java/ink/wgink/login/base/service/login/impl/LoginFormServiceImpl.java

@@ -0,0 +1,123 @@
+package ink.wgink.login.base.service.login.impl;
+
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
+import ink.wgink.common.base.DefaultBaseService;
+import ink.wgink.login.base.dao.login.ILoginFormDao;
+import ink.wgink.login.base.pojo.dtos.login.LoginFormDTO;
+import ink.wgink.login.base.pojo.vos.login.LoginFormVO;
+import ink.wgink.login.base.service.login.ILoginFormService;
+import ink.wgink.pojo.ListPage;
+import ink.wgink.pojo.result.SuccessResultList;
+import ink.wgink.util.UUIDUtil;
+import ink.wgink.util.map.HashMapUtil;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+import java.util.Map;
+
+/**
+ * @ClassName: LoginFormServiceImpl
+ * @Description: 登录form表单
+ * @Author: wanggeng
+ * @Date: 2021/7/29 3:45 下午
+ * @Version: 1.0
+ */
+@Service
+public class LoginFormServiceImpl extends DefaultBaseService implements ILoginFormService {
+
+    @Autowired
+    private ILoginFormDao loginFormDao;
+
+    @Override
+    public void save(LoginFormVO loginFormVO) {
+        if (loginFormVO.getIsActive() == 1) {
+            updateUnActiveAll();
+        }
+        String loginFormId = UUIDUtil.getUUID();
+        Map<String, Object> params = HashMapUtil.beanToMap(loginFormVO);
+        params.put("loginFormId", loginFormId);
+        setSaveInfo(params);
+        loginFormDao.save(params);
+    }
+
+    @Override
+    public void remove(List<String> loginFormIds) {
+        Map<String, Object> params = getHashMap(2);
+        params.put("loginFormIds", loginFormIds);
+        loginFormDao.remove(params);
+    }
+
+    @Override
+    public void update(String loginFormId, LoginFormVO loginFormVO) {
+        if (loginFormVO.getIsActive() == 1) {
+            updateUnActiveAll();
+        }
+        Map<String, Object> params = HashMapUtil.beanToMap(loginFormVO);
+        params.put("loginFormId", loginFormId);
+        setUpdateInfo(params);
+        loginFormDao.update(params);
+    }
+
+    @Override
+    public void updateActive(String loginFormId) {
+        updateUnActiveAll();
+        Map<String, Object> params = getHashMap(4);
+        // 激活当前
+        params.put("isActive", 1);
+        params.put("loginFormId", loginFormId);
+        loginFormDao.updateActive(params);
+    }
+
+    @Override
+    public void updateUnActive(String loginFormId) {
+        Map<String, Object> params = getHashMap(4);
+        params.put("isActive", 0);
+        params.put("loginFormId", loginFormId);
+        loginFormDao.updateActive(params);
+    }
+
+    /**
+     * 取消全部激活
+     */
+    private void updateUnActiveAll() {
+        Map<String, Object> params = getHashMap(4);
+        params.put("isActive", 0);
+        loginFormDao.updateActive(params);
+    }
+
+    @Override
+    public List<LoginFormDTO> list(Map<String, Object> params) {
+        return loginFormDao.list(params);
+    }
+
+    @Override
+    public SuccessResultList<List<LoginFormDTO>> listPage(ListPage page) {
+        PageHelper.startPage(page.getPage(), page.getRows());
+        List<LoginFormDTO> loginFormDTOs = list(page.getParams());
+        PageInfo<LoginFormDTO> pageInfo = new PageInfo<>(loginFormDTOs);
+        return new SuccessResultList<>(loginFormDTOs, pageInfo.getPageNum(), pageInfo.getTotal());
+    }
+
+    @Override
+    public LoginFormDTO get(Map<String, Object> params) {
+        return loginFormDao.get(params);
+    }
+
+    @Override
+    public LoginFormDTO get(String loginFormId) {
+        Map<String, Object> params = getHashMap(2);
+        params.put("loginFormId", loginFormId);
+        return get(params);
+    }
+
+    @Override
+    public LoginFormDTO getActive() {
+        Map<String, Object> params = getHashMap(2);
+        params.put("isActive", 1);
+        return get(params);
+    }
+
+
+}

login-base/src/main/resources/mybatis/mapper/login/login-form-mapper.xml

@@ -0,0 +1,185 @@
+<?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="ink.wgink.login.base.dao.login.ILoginFormDao">
+
+    <cache flushInterval="3600000"/>
+
+    <resultMap id="loginFormDTO" type="ink.wgink.login.base.pojo.dtos.login.LoginFormDTO">
+        <result column="loginform_id" property="loginFormId"/>
+        <result column="name" property="name"/>
+        <result column="summary" property="summary"/>
+        <result column="is_active" property="isActive"/>
+        <result column="preview" property="preview"/>
+        <result column="form_html" property="formHtml"/>
+        <result column="form_css" property="formCss"/>
+        <result column="form_left_css" property="formLeftCss"/>
+        <result column="form_center_css" property="formCenterCss"/>
+        <result column="form_right_css" property="formRightCss"/>
+        <result column="gmt_create" property="gmtCreat"/>
+    </resultMap>
+
+    <!-- 建表 -->
+    <update id="createTable">
+        CREATE TABLE IF NOT EXISTS `sys_login_form` (
+            `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
+            `loginform_id` char(36) NOT NULL COMMENT '主键',
+            `name` varchar(255) NOT NULL COMMENT '名称',
+            `summary` varchar(255) DEFAULT NULL COMMENT '说明',
+            `is_active` int(1) DEFAULT '1' COMMENT '是否激活',
+            `preview` char(36) DEFAULT NULL COMMENT '预览',
+            `form_html` longtext COMMENT 'form代码',
+            `form_css` longtext COMMENT 'form样式',
+            `form_left_css` text COMMENT 'form左样式',
+            `form_center_css` text COMMENT 'form中样式',
+            `form_right_css` text COMMENT 'form右样式',
+            `gmt_create` datetime DEFAULT NULL,
+            `creator` char(36) DEFAULT NULL,
+            `gmt_modified` datetime DEFAULT NULL,
+            `modifier` char(36) DEFAULT NULL,
+            `is_delete` int(1) DEFAULT '1',
+            PRIMARY KEY (`id`,`loginform_id`)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
+    </update>
+
+    <!-- 新增登录form表单 -->
+    <insert id="save" parameterType="map" flushCache="true">
+        INSERT INTO sys_login_form(
+            loginform_id,
+            name,
+            summary,
+            is_active,
+            preview,
+            form_html,
+            form_css,
+            form_left_css,
+            form_center_css,
+            form_right_css,
+            gmt_create,
+            creator,
+            gmt_modified,
+            modifier,
+            is_delete
+        ) VALUES(
+            #{loginFormId},
+            #{name},
+            #{summary},
+            #{isActive},
+            #{preview},
+            #{formHtml},
+            #{formCss},
+            #{formLeftCss},
+            #{formCenterCss},
+            #{formRightCss},
+            #{gmtCreate},
+            #{creator},
+            #{gmtModified},
+            #{modifier},
+            #{isDelete}
+        )
+    </insert>
+
+    <!-- 删除登录form表单 -->
+    <update id="remove" parameterType="map" flushCache="true">
+        UPDATE
+            sys_login_form
+        SET
+            is_delete = 1,
+            modifier = #{modifier},
+            gmt_modified = #{gmtModified}
+        WHERE
+            loginform_id IN
+        <foreach collection="loginFormIds" index="index" open="(" separator="," close=")">
+            #{loginFormIds[${index}]}
+        </foreach>
+    </update>
+
+    <!-- 修改登录form表单 -->
+    <update id="update" parameterType="map" flushCache="true">
+        UPDATE
+            sys_login_form
+        SET
+        <if test="name != null and name != ''">
+            name = #{name},
+        </if>
+        <if test="summary != null and summary != ''">
+            summary = #{summary},
+        </if>
+        <if test="isActive != null">
+            is_active = #{isActive},
+        </if>
+        <if test="preview != null and preview != ''">
+            preview = #{preview},
+        </if>
+        <if test="formHtml != null and formHtml != ''">
+            form_html = #{formHtml},
+        </if>
+        <if test="formCss != null and formCss != ''">
+            form_css = #{formCss},
+        </if>
+        <if test="formLeftCss != null and formLeftCss != ''">
+            form_left_css = #{formLeftCss},
+        </if>
+        <if test="formCenterCss != null and formCenterCss != ''">
+            form_center_css = #{formCenterCss},
+        </if>
+        <if test="formRightCss != null and formRightCss != ''">
+            form_right_css = #{formRightCss},
+        </if>
+            modifier = #{modifier},
+            gmt_modified = #{gmtModified}
+        WHERE
+            loginform_id = #{loginFormId}
+    </update>
+
+    <!-- 修改激活状态 -->
+    <update id="updateActive" parameterType="map" flushCache="true">
+        UPDATE
+            sys_login_form
+        SET
+            is_active = #{isActive}
+        <where>
+            <if test="loginFormId != null and loginFormId != ''">
+            loginform_id = #{loginFormId}
+            </if>
+        </where>
+    </update>
+
+    <!-- 登录form表单列表 -->
+    <select id="list" parameterType="map" resultMap="loginFormDTO" useCache="true">
+        SELECT
+            loginform_id,
+            name,
+            summary,
+            is_active,
+            preview,
+            gmt_create
+        FROM
+            sys_login_form
+    </select>
+
+    <!-- 登录form表单详情 -->
+    <select id="get" parameterType="map" resultMap="loginFormDTO" useCache="true">
+        SELECT
+            loginform_id,
+            name,
+            summary,
+            is_active,
+            preview,
+            form_html,
+            form_css,
+            form_left_css,
+            form_center_css,
+            form_right_css,
+            gmt_create
+        FROM
+            sys_login_form
+        WHERE
+        <if test="loginFormId != null and loginFormId != ''">
+            loginform_id = #{loginFormId}
+        </if>
+        <if test="isActive != null">
+            is_active = #{isActive}
+        </if>
+    </select>
+
+</mapper>

login-base/src/main/resources/templates/config/update.html

@@ -192,9 +192,9 @@
                 <div class="layui-form-item" style="margin: 4px 0;">
                     <div class="layui-form-mid layui-word-aux">登录框位置</div>
                     <div class="layui-input-inline" style="width: 400px;">
-                        <input type="radio" name="loginBoxPosition" value="default" title="默认（居右）" checked>
-                        <input type="radio" name="loginBoxPosition" value="center" title="居中">
                         <input type="radio" name="loginBoxPosition" value="left" title="局左">
+                        <input type="radio" name="loginBoxPosition" value="center" title="居中">
+                        <input type="radio" name="loginBoxPosition" value="default" title="默认（居右）" checked>
                     </div>
                 </div>
                 <div class="layui-form-item" style="margin: 4px 0;">
@@ -225,13 +225,6 @@
                         <input type="radio" name="menuMode" value="floatLeft" title="左浮动">
                     </div>
                 </div>
-                <div class="layui-form-item" style="margin: 4px 0;">
-                    <div class="layui-form-mid layui-word-aux">登录页面</div>
-                    <div class="layui-input-inline" style="width: 400px;">
-                        <input type="radio" name="loginPage" value="login" title="默认" checked>
-                        <input type="radio" name="loginPage" value="login2" title="样式1">
-                    </div>
-                </div>
             </div>
         </div>
         <div class="layui-form-item layui-layout-admin">

login-base/src/main/resources/templates/default-main.html

@@ -224,7 +224,6 @@
         /** 左浮动菜单 start **/
         var hideSideMenuTimeout = null;
         $('.layui-side-menu-show').on('mouseover', function(event) {
-            console.log(1)
             $('#sideMenu').removeClass('layui-side-menu-hidden');
         });
         $('#sideMenu').on('mouseout', function(event) {

login-base/src/main/resources/templates/login.html

@@ -12,13 +12,8 @@
     <link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=3" media="all">
     <link rel="stylesheet" href="assets/css/supersized.css?v=3">
     <link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=3" media="all">
-    <style th:if="${pageParams.loginBoxPosition eq 'center'}">
-        .layadmin-user-login-main {
-            left: 50%;
-            margin-left: -188px;
-        }
-    </style>
-    <style th:if="${pageParams.loginBoxPosition eq 'left'}">
+    <style th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formCss}"></style>
+    <style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'left'}">
         @media screen and (max-width: 1920px) {
             .layadmin-user-login-main {
                 right: 68%;
@@ -30,10 +25,20 @@
             }
         }
     </style>
+    <style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'left'}" th:utext="${customLoginForm.formLeftCss}"></style>
+    <style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'center'}">
+        .layadmin-user-login-main {
+            left: 50%;
+            margin-left: -188px;
+        }
+    </style>
+    <style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'center'}" th:utext="${customLoginForm.formCenterCss}"></style>
+    <style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'default'}" th:utext="${customLoginForm.formRightCss}"></style>
 </head>
 <body>
 <div id="app">
-    <div v-cloak>
+    <div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></div>
+    <div v-cloak th:if="${customLoginForm eq null}">
         <div id="loginBox" class="layadmin-user-login-main">
             <div class="layadmin-user-login-box layadmin-user-login-header">
                 <img class="system-logo" :src="'route/file/download/true/'+ pageParams.systemLogo" v-if="pageParams.systemLogo">
@@ -43,7 +48,7 @@
                 </div>
             </div>
             <div id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form">
-                <form id="loginForm" action="userlogin" method="post" @submit.prevent="submitForm">
+                <form id="loginForm" :action="pageParams.loginFormAction" method="post" @submit.prevent="submitForm">
                     <div class="layui-form-item">
                         <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
                         <input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名" class="layui-input">

login-base/src/main/resources/templates/login/form/list.html

@@ -0,0 +1,281 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base th:href="${#request.getContextPath() + '/'}">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
+</head>
+<body>
+<div class="layui-fluid layui-anim layui-anim-fadein">
+    <div class="layui-row">
+        <div class="layui-col-md12">
+            <div class="layui-card">
+                <div id="tableBody" class="layui-card-body">
+                    <div class="test-table-reload-btn" style="margin-bottom: 10px;">
+                        <div class="layui-inline">
+                            <input type="text" id="keywords" class="layui-input search-item" placeholder="输入关键字">
+                        </div>
+                        <button type="button" id="search" class="layui-btn layui-btn-sm">
+                            <i class="fa fa-lg fa-search"></i> 搜索
+                        </button>
+                        <span>最多只能有一个表单被激活</span>
+                    </div>
+                    <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
+                    <!-- 表头按钮组 -->
+                    <script type="text/html" id="headerToolBar">
+                        <div class="layui-btn-group">
+                            <button type="button" class="layui-btn layui-btn-sm" lay-event="save">
+                                <i class="fa fa-lg fa-plus"></i> 新增
+                            </button>
+                            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">
+                                <i class="fa fa-lg fa-edit"></i> 编辑
+                            </button>
+                            <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="remove">
+                                <i class="fa fa-lg fa-trash"></i> 删除
+                            </button>
+                        </div>
+                    </script>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script src="assets/js/vendor/viewer/viewer.min.js"></script>
+<script src="assets/layuiadmin/layui/layui.js"></script>
+<script type="text/javascript">
+    layui.config({
+        base: 'assets/layuiadmin/'
+    }).extend({
+        index: 'lib/index'
+    }).use(['index', 'table', 'laydate', 'ztree'], function() {
+        var $ = layui.$;
+        var $win = $(window);
+        var table = layui.table;
+        var admin = layui.admin;
+        var laydate = layui.laydate;
+        var tableUrl = 'api/login-form/listpage';
+        var viewer = new Viewer(document.getElementById('tableBody'));
+
+        // 初始化表格
+        function initTable() {
+            table.render({
+                elem: '#dataTable',
+                id: 'dataTable',
+                url: top.restAjax.path(tableUrl, []),
+                width: admin.screen() > 1 ? '100%' : '',
+                height: $win.height() - 90,
+                limit: 20,
+                limits: [20, 40, 60, 80, 100, 200],
+                toolbar: '#headerToolBar',
+                request: {
+                    pageName: 'page',
+                    limitName: 'rows'
+                },
+                cols: [
+                    [
+                        {type:'checkbox', fixed: 'left'},
+                        {field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '<span>{{d.LAY_INDEX}}</span>'},
+                        {field:'name', width:160, title: '名称', align:'center',
+                            templet: function(row) {
+                                var rowData = row[this.field];
+                                if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
+                                    return '-';
+                                }
+                                return rowData;
+                            }
+                        },
+                        {field:'summary', width:160, title: '说明', align:'center',
+                            templet: function(row) {
+                                var rowData = row[this.field];
+                                if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
+                                    return '-';
+                                }
+                                return rowData;
+                            }
+                        },
+                        {field:'isActive', width:100, title: '激活状态', align:'center',
+                            templet: function(row) {
+                                if(row.isActive == 0) {
+                                    return '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="activeEvent" title="点击激活">未激活</button>';
+                                } else if(row.isActive == 1) {
+                                    return '<button type="button" class="layui-btn layui-btn-xs" lay-event="unActiveEvent" title="点击取消">已激活</button>';
+                                }
+                                return '错误';
+                            }
+                        },
+                        {field:'preview', width:100, title: '预览图', align:'center',
+                            templet: function(row) {
+                                var rowData = row[this.field];
+                                if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
+                                    return '-';
+                                }
+                                return '<span class="preview-photos" style="width: 70px;">' +
+                                    '<img src="route/file/download/true/'+ rowData +'" align="加载失败" style="width: 100%;">' +
+                                    '</span>';
+                            }
+                        },
+                        {field:'gmtCreat', width:180, title: '创建时间', align:'center',
+                            templet: function(row) {
+                                var rowData = row[this.field];
+                                if(typeof(rowData) === 'undefined' || rowData == null || rowData == '') {
+                                    return '-';
+                                }
+                                return rowData;
+                            }
+                        },
+                    ]
+                ],
+                page: true,
+                parseData: function(data) {
+                    setTimeout(function() {
+                        viewer.update();
+                    }, 500);
+                    return {
+                        'code': 0,
+                        'msg': '',
+                        'count': data.total,
+                        'data': data.rows
+                    };
+                }
+            });
+        }
+        // 重载表格
+        function reloadTable(currentPage) {
+            table.reload('dataTable', {
+                url: top.restAjax.path(tableUrl, []),
+                where: {
+                    keywords: $('#keywords').val(),
+                },
+                page: {
+                    curr: currentPage
+                },
+                height: $win.height() - 90,
+            });
+        }
+        // 初始化日期
+        function initDate() {}
+        // 删除
+        function removeData(ids) {
+            top.dialog.msg(top.dataMessage.delete, {
+                time: 0,
+                btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
+                shade: 0.3,
+                yes: function (index) {
+                    top.dialog.close(index);
+                    var layIndex;
+                    top.restAjax.delete(top.restAjax.path('api/login-form/remove/{ids}', [ids]), {}, null, function (code, data) {
+                        top.dialog.msg(top.dataMessage.deleteSuccess, {time: 1000});
+                        reloadTable();
+                    }, function (code, data) {
+                        top.dialog.msg(data.msg);
+                    }, function () {
+                        layIndex = top.dialog.msg(top.dataMessage.deleting, {icon: 16, time: 0, shade: 0.3});
+                    }, function () {
+                        top.dialog.close(layIndex);
+                    });
+                }
+            });
+        }
+        initTable();
+        initDate();
+
+        // 事件 - 页面变化
+        $win.on('resize', function() {
+            reloadTable();
+        });
+        // 事件 - 搜索
+        $(document).on('click', '#search', function() {
+            reloadTable(1);
+        });
+        // 事件 - 增删改
+        table.on('toolbar(dataTable)', function(obj) {
+            var layEvent = obj.event;
+            var checkStatus = table.checkStatus('dataTable');
+            var checkDatas = checkStatus.data;
+            if(layEvent === 'save') {
+                layer.open({
+                    type: 2,
+                    title: false,
+                    closeBtn: 0,
+                    area: ['100%', '100%'],
+                    shadeClose: true,
+                    anim: 2,
+                    content: top.restAjax.path('route/login-form/save', []),
+                    end: function() {
+                        reloadTable();
+                    }
+                });
+            } else if(layEvent === 'update') {
+                if(checkDatas.length === 0) {
+                    top.dialog.msg(top.dataMessage.table.selectEdit);
+                } else if(checkDatas.length > 1) {
+                    top.dialog.msg(top.dataMessage.table.selectOneEdit);
+                } else {
+                    layer.open({
+                        type: 2,
+                        title: false,
+                        closeBtn: 0,
+                        area: ['100%', '100%'],
+                        shadeClose: true,
+                        anim: 2,
+                        content: top.restAjax.path('route/login-form/update?loginFormId={loginFormId}', [checkDatas[0].loginFormId]),
+                        end: function() {
+                            reloadTable();
+                        }
+                    });
+                }
+            } else if(layEvent === 'remove') {
+                if(checkDatas.length === 0) {
+                    top.dialog.msg(top.dataMessage.table.selectDelete);
+                } else {
+                    var ids = '';
+                    for(var i = 0, item; item = checkDatas[i++];) {
+                        if(i > 1) {
+                            ids += '_';
+                        }
+                        ids += item.loginFormId;
+                    }
+                    removeData(ids);
+                }
+            }
+        });
+
+        table.on('tool(dataTable)', function(obj) {
+            var data = obj.data;
+            var event = obj.event;
+            if(event === 'activeEvent') {
+                var loadLayerIndex;
+                top.restAjax.put(top.restAjax.path('api/login-form/update-active/{loginFormId}', [data.loginFormId]), {}, null, function(code, data) {
+                    top.dialog.msg('修改成功');
+                    reloadTable();
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                }, function() {
+                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
+                }, function() {
+                    top.dialog.close(loadLayerIndex);
+                });
+            } else if(event === 'unActiveEvent') {
+                var loadLayerIndex;
+                top.restAjax.put(top.restAjax.path('api/login-form/update-un-active/{loginFormId}', [data.loginFormId]), {}, null, function(code, data) {
+                    top.dialog.msg('修改成功');
+                    reloadTable();
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                }, function() {
+                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
+                }, function() {
+                    top.dialog.close(loadLayerIndex);
+                });
+            }
+        })
+    });
+</script>
+</body>
+</html>

login-base/src/main/resources/templates/login/form/save.html

@@ -0,0 +1,514 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base th:href="${#request.getContextPath() + '/'}">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <link rel="stylesheet" href="assets/js/vendor/codemirror/codemirror.css">
+    <link rel="stylesheet" href="assets/js/vendor/codemirror/theme/dracula.css">
+    <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
+</head>
+<body>
+<div class="layui-fluid layui-anim layui-anim-fadein">
+    <div class="layui-card">
+        <div class="layui-card-header">
+            <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
+                <a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
+                <a href="javascript:void(0);"><cite>新增内容</cite></a>
+            </span>
+        </div>
+        <div class="layui-card-body" style="padding: 15px;">
+            <form class="layui-form layui-form-pane" lay-filter="dataForm">
+                <div class="layui-form-item">
+                    <label class="layui-form-label">名称 *</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="name" lay-verify="required" placeholder="请输入名称" class="layui-input" maxlength="255">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">说明</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="summary" placeholder="请输入说明" class="layui-input" maxlength="255">
+                    </div>
+                </div>
+                <div class="layui-form-item" pane>
+                    <label class="layui-form-label">是否激活 *</label>
+                    <div class="layui-input-block" >
+                        <input type="radio" name="isActive" value="0" title="否" checked>
+                        <input type="radio" name="isActive" value="1" title="是">
+                    </div>
+                </div>
+                <div class="layui-form-item layui-form-text">
+                    <label class="layui-form-label">预览图</label>
+                    <div class="layui-input-block">
+                        <input type="hidden" id="preview" name="preview">
+                        <div class="layui-btn-container" id="previewFileBox" style="border: 1px solid #e6e6e6;"></div>
+                        <script id="previewFileDownload" type="text/html">
+                            {{# var fileName = 'preview'; }}
+                            {{# if(d[fileName].length > 0) { }}
+                            {{#    var files = d[fileName];}}
+                            {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
+                            <div class="upload-image-box">
+                                <span class="upload-image-span">
+                                    <img src="route/file/download/false/{{item.fileId}}" align="加载失败">
+                                </span>
+                                <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="previewRemoveFile">
+                                    <i class="fa fa-trash-o"></i>
+                                </a>
+                            </div>
+                            {{#    } }}
+                            {{# } }}
+                            {{# if(d[fileName].length < 1) { }}
+                            <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
+                                <a href="javascript:void(0);" lay-form-button data-explain="预览图" data-name="preview" lay-filter="previewUploadFile">
+                                    <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
+                                </a>
+                            </div>
+                            {{# } }}
+                        </script>
+                    </div>
+                </div>
+                <blockquote class="layui-elem-quote">
+                    <ul>
+                        <li>1. form表单代码：表单的HTML代码。</li>
+                        <li>2. form表单样式：表单的CSS代码。</li>
+                        <li>3. dom节点的条件判断使用vue判断，根据<b>pageParams</b>中的属性动态判断dom元素的展示方式。</li>
+                        <li>4. pageParams 属性说明：</li>
+                        <li>
+                            <table class="layui-table">
+                                <colgroup>
+                                    <col width="200">
+                                    <col width="200">
+                                    <col>
+                                    <col>
+                                    <col>
+                                </colgroup>
+                                <thead>
+                                    <tr>
+                                        <th>字段名</th>
+                                        <th>说明</th>
+                                        <th>默认值</th>
+                                        <th>能否为空</th>
+                                        <th>取值范围</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>pageParams.serverUrl</td>
+                                        <td>服务地址</td>
+                                        <td></td>
+                                        <td>N</td>
+                                        <td></td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.systemLogo</td>
+                                        <td>系统Logo文件ID</td>
+                                        <td></td>
+                                        <td>Y</td>
+                                        <td></td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.systemTitle</td>
+                                        <td>系统主标题</td>
+                                        <td></td>
+                                        <td>N</td>
+                                        <td></td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.systemTitleSize</td>
+                                        <td>系统主标题字体大小</td>
+                                        <td>26</td>
+                                        <td>Y</td>
+                                        <td>13+</td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.systemSubTitle</td>
+                                        <td>系统副标题</td>
+                                        <td></td>
+                                        <td>Y</td>
+                                        <td></td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.systemSubTitleSize</td>
+                                        <td>系统主标题字体大小</td>
+                                        <td>16</td>
+                                        <td>Y</td>
+                                        <td>13+</td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.copyRightYear</td>
+                                        <td>版权年份</td>
+                                        <td></td>
+                                        <td>Y</td>
+                                        <td></td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.copyleft</td>
+                                        <td>版权所属</td>
+                                        <td></td>
+                                        <td>Y</td>
+                                        <td></td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.officialUrl</td>
+                                        <td>官方链接</td>
+                                        <td></td>
+                                        <td>Y</td>
+                                        <td></td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.verificationCode</td>
+                                        <td>开启验证码</td>
+                                        <td></td>
+                                        <td>Y</td>
+                                        <td>true | false</td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.loginBoxPosition</td>
+                                        <td>登录框位置</td>
+                                        <td></td>
+                                        <td>N</td>
+                                        <td>left | center | right</td>
+                                    </tr>
+                                    <tr>
+                                        <td>pageParams.loginFormAction</td>
+                                        <td>form表单action路径</td>
+                                        <td></td>
+                                        <td>N</td>
+                                        <td></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </li>
+                        <li>5. 表单提交method为<b>POST</b></li>
+                        <li>6. form表单上添加<b>@submit.prevent="submitForm"</b>用于控制表单提交</li>
+                        <li>7. 表单具体内容如下表所示</li>
+                        <li>
+                            <table class="layui-table">
+                                <colgroup>
+                                    <col width="100">
+                                    <col width="120">
+                                    <col>
+                                    <col>
+                                    <col>
+                                </colgroup>
+                                <thead>
+                                    <tr>
+                                        <th>名称</th>
+                                        <th>类型</th>
+                                        <th>name值（表单名）</th>
+                                        <th>v-model值（vue绑定值）</th>
+                                        <th>lay-verify值（前端校验）</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>用户名</td>
+                                        <td>input[text]</td>
+                                        <td>username</td>
+                                        <td>formData.username</td>
+                                        <td>username</td>
+                                    </tr>
+                                    <tr>
+                                        <td>密码</td>
+                                        <td>input[password]</td>
+                                        <td>password</td>
+                                        <td>formData.password</td>
+                                        <td>password</td>
+                                    </tr>
+                                    <tr>
+                                        <td>验证码</td>
+                                        <td>input[text]</td>
+                                        <td>verificationCode</td>
+                                        <td>formData.verificationCode</td>
+                                        <td>verificationCode</td>
+                                    </tr>
+                                    <tr>
+                                        <td>记住密码</td>
+                                        <td>input[checkbox]</td>
+                                        <td>remember</td>
+                                        <td>formData.remember</td>
+                                        <td></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </li>
+                        <li>8. 图形验证码的地址为：<b>oauth/verification-code/png</b></li>
+                        <li>9. 提交按钮固定写法
+                            <xmp><button type="submit" lay-submit>登 录</button></xmp>
+                        </li>
+                    </ul>
+                </blockquote>
+                <div class="layui-row layui-col-space15">
+                    <div class="layui-col-md8 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单代码 *</label>
+                            <div class="layui-input-block">
+                                <textarea id="formHtml" name="formHtml"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-md4 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单样式</label>
+                            <div class="layui-input-block">
+                                <textarea id="formCss" name="formCss"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <blockquote class="layui-elem-quote">
+                    以下CSS样式控制的是Form表单的对其方式，左、中、右需单独设置。设置完成后，激活表单，在<b>系统配置</b>中控制表单的对其方式。
+                </blockquote>
+                <div class="layui-row layui-col-space15">
+                    <div class="layui-col-md4 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单居左样式</label>
+                            <div class="layui-input-block">
+                                <textarea id="formLeftCss" name="formLeftCss"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-md4 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单居中样式</label>
+                            <div class="layui-input-block">
+                                <textarea id="formCenterCss" name="formCenterCss"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-md4 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单居右样式</label>
+                            <div class="layui-input-block">
+                                <textarea id="formRightCss" name="formRightCss"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="layui-form-item layui-layout-admin">
+                    <div class="layui-input-block">
+                        <div class="layui-footer" style="left: 0;">
+                            <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交新增</button>
+                            <button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="assets/js/vendor/viewer/viewer.min.js"></script>
+<script src="assets/js/vendor/codemirror/codemirror.js"></script>
+<script src="assets/js/vendor/codemirror/mode/css/css.js"></script>
+<script src="assets/js/vendor/codemirror/mode/javascript/javascript.js"></script>
+<script src="assets/js/vendor/codemirror/mode/htmlmixed/htmlmixed.js"></script>
+<script src="assets/layuiadmin/layui/layui.js"></script>
+<script>
+    layui.config({
+        base: 'assets/layuiadmin/' //静态资源所在路径
+    }).extend({
+        index: 'lib/index' //主入口模块
+    }).use(['index', 'form', 'laydate'], function(){
+        var $ = layui.$;
+        var form = layui.form;
+        var laytpl = layui.laytpl;
+        var viewerObj = {};
+
+        function closeBox() {
+            parent.layer.close(parent.layer.getFrameIndex(window.name));
+        }
+
+        function refreshDownloadTemplet(fileName, file) {
+            var dataRander = {};
+            dataRander[fileName] = file;
+
+            laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
+                document.getElementById(fileName +'FileBox').innerHTML = html;
+            });
+        }
+
+        // 初始化文件列表
+        function initFileList(fileName, ids, callback) {
+            var dataForm = {};
+            dataForm[fileName] = ids;
+            form.val('dataForm', dataForm);
+
+            if(!ids) {
+                refreshDownloadTemplet(fileName, []);
+                if(callback) {
+                    callback(fileName, []);
+                }
+                return;
+            }
+
+            top.restAjax.get(top.restAjax.path('api/file/list', []), {
+                ids: ids
+            }, null, function(code, data) {
+                refreshDownloadTemplet(fileName, data);
+                if(callback) {
+                    callback(fileName, data);
+                }
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 初始化预览图预览图上传
+        function initPreviewUploadFile() {
+            var files = $('#preview').val();
+            initFileList('preview', files, function(fileName) {
+                var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
+                viewerObj[fileName] = viewer;
+            });
+
+            form.on('button(previewUploadFile)', function(obj) {
+                var name = this.dataset.name;
+                var explain = this.dataset.explain;
+                top.dialog.file({
+                    type: 'image',
+                    title: '上传'+ explain,
+                    width: '400px',
+                    height: '420px',
+                    maxFileCount: '1',
+                    onClose: function() {
+                        var uploadFileArray = top.dialog.dialogData.uploadFileArray;
+                        if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
+                            var files = $('#'+ name).val();
+                            for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
+                                if(files.length > 0) {
+                                    files += ',';
+                                }
+                                files += file.data;
+                            }
+                            initFileList(name, files, function(fileName) {
+                                viewerObj[fileName].update();
+                            });
+                        }
+                    }
+                });
+            });
+
+            form.on('button(previewRemoveFile)', function(obj) {
+                var name = this.dataset.name;
+                var id = this.dataset.id;
+                var files = $('#'+ name).val().replace(id, '');
+                files = files.replace(/\,+/g, ',');
+                if(files.charAt(0) == ',') {
+                    files = files.substring(1);
+                }
+                if(files.charAt(files.length - 1) == ',') {
+                    files = files.substring(0, files.length - 1);
+                }
+                initFileList(name, files, function(fileName) {
+                    viewerObj[fileName].update();
+                });
+            });
+        }
+
+        function initFormHtml() {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formHtml'), {
+                lineNumbers: true,
+                mode: 'htmlmixed',
+                theme: 'dracula'
+            });
+            editor.on('change', function(self, changeValue) {
+                $('#formHtml').val(self.getValue());
+            })
+        }
+
+        function initFormCss() {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formCss'), {
+                lineNumbers: true,
+                mode: 'css',
+                theme: 'dracula',
+            });
+            editor.on('change', function(self, changeValue) {
+                $('#formCss').val(self.getValue());
+            })
+        }
+
+        function initFormLeftCss() {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formLeftCss'), {
+                lineNumbers: true,
+                mode: 'css',
+                theme: 'dracula'
+            });
+            editor.on('change', function(self, changeValue) {
+                $('#formLeftCss').val(self.getValue());
+            })
+        }
+
+        function initFormCenterCss() {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formCenterCss'), {
+                lineNumbers: true,
+                mode: 'css',
+                theme: 'dracula'
+            });
+            editor.on('change', function(self, changeValue) {
+                $('#formCenterCss').val(self.getValue());
+            })
+        }
+
+        function initFormRightCss() {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formRightCss'), {
+                lineNumbers: true,
+                mode: 'css',
+                theme: 'dracula'
+            });
+            editor.on('change', function(self, changeValue) {
+                $('#formRightCss').val(self.getValue());
+            })
+        }
+
+        // 初始化
+        function initData() {
+            initPreviewUploadFile();
+            initFormHtml();
+            initFormCss();
+            initFormLeftCss();
+            initFormCenterCss();
+            initFormRightCss();
+        }
+        initData();
+
+        // 提交表单
+        form.on('submit(submitForm)', function(formData) {
+            top.dialog.confirm(top.dataMessage.commit, function(index) {
+                top.dialog.close(index);
+                var loadLayerIndex;
+                top.restAjax.post(top.restAjax.path('api/login-form/save', []), formData.field, null, function(code, data) {
+                    var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
+                        time: 0,
+                        btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
+                        shade: 0.3,
+                        yes: function(index) {
+                            top.dialog.close(index);
+                            window.location.reload();
+                        },
+                        btn2: function() {
+                            closeBox();
+                        }
+                    });
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                }, function() {
+                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
+                }, function() {
+                    top.dialog.close(loadLayerIndex);
+                });
+            });
+            return false;
+        });
+        $('.close').on('click', function() {
+            closeBox();
+        });
+    });
+</script>
+</body>
+</html>

login-base/src/main/resources/templates/login/form/update.html

@@ -0,0 +1,542 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base th:href="${#request.getContextPath() + '/'}">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <link rel="stylesheet" href="assets/js/vendor/codemirror/codemirror.css">
+    <link rel="stylesheet" href="assets/js/vendor/codemirror/theme/dracula.css">
+    <link rel="stylesheet" type="text/css" href="assets/js/vendor/viewer/viewer.min.css">
+</head>
+<body>
+<div class="layui-fluid layui-anim layui-anim-fadein">
+    <div class="layui-card">
+        <div class="layui-card-header">
+            <span class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
+                <a class="close" href="javascript:void(0);">上级列表</a><span lay-separator="">/</span>
+                <a href="javascript:void(0);"><cite>编辑内容</cite></a>
+            </span>
+        </div>
+        <div class="layui-card-body" style="padding: 15px;">
+            <form class="layui-form layui-form-pane" lay-filter="dataForm">
+                <div class="layui-form-item">
+                    <label class="layui-form-label">名称 *</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="name" lay-verify="required" placeholder="请输入名称" class="layui-input" maxlength="255">
+                    </div>
+                </div>
+                <div class="layui-form-item">
+                    <label class="layui-form-label">说明</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="summary" placeholder="请输入说明" class="layui-input" maxlength="255">
+                    </div>
+                </div>
+                <div class="layui-form-item" pane>
+                    <label class="layui-form-label">是否激活 *</label>
+                    <div class="layui-input-block" >
+                        <input type="radio" name="isActive" value="0" title="否" checked>
+                        <input type="radio" name="isActive" value="1" title="是">
+                    </div>
+                </div>
+                <div class="layui-form-item layui-form-text">
+                    <label class="layui-form-label">预览图</label>
+                    <div class="layui-input-block">
+                        <input type="hidden" id="preview" name="preview">
+                        <div class="layui-btn-container" id="previewFileBox" style="border: 1px solid #e6e6e6;"></div>
+                        <script id="previewFileDownload" type="text/html">
+                            {{# var fileName = 'preview'; }}
+                            {{# if(d[fileName].length > 0) { }}
+                            {{#    var files = d[fileName];}}
+                            {{#    for(var i = 0, item = files[i]; item = files[i++];) { }}
+                            <div class="upload-image-box">
+                                <span class="upload-image-span">
+                                    <img src="route/file/download/false/{{item.fileId}}" align="加载失败">
+                                </span>
+                                <a class="layui-btn layui-btn-xs layui-btn-danger text-danger remove-image" href="javascript:void(0);" lay-form-button data-id="{{item.fileId}}" data-name="{{fileName}}" lay-filter="previewRemoveFile">
+                                    <i class="fa fa-trash-o"></i>
+                                </a>
+                            </div>
+                            {{#    } }}
+                            {{# } }}
+                            {{# if(d[fileName].length < 1) { }}
+                            <div class="upload-image-box" style="width: auto; height: auto; padding: 5px;">
+                                <a href="javascript:void(0);" lay-form-button data-explain="预览图" data-name="preview" lay-filter="previewUploadFile">
+                                    <i class="fa fa-plus-square-o" style="font-size: 70px;"></i>
+                                </a>
+                            </div>
+                            {{# } }}
+                        </script>
+                    </div>
+                </div>
+                <blockquote class="layui-elem-quote">
+                    <ul>
+                        <li>1. form表单代码：表单的HTML代码。</li>
+                        <li>2. form表单样式：表单的CSS代码。</li>
+                        <li>3. dom节点的条件判断使用vue判断，根据<b>pageParams</b>中的属性动态判断dom元素的展示方式。</li>
+                        <li>4. pageParams 属性说明：</li>
+                        <li>
+                            <table class="layui-table">
+                                <colgroup>
+                                    <col width="200">
+                                    <col width="200">
+                                    <col>
+                                    <col>
+                                    <col>
+                                </colgroup>
+                                <thead>
+                                <tr>
+                                    <th>字段名</th>
+                                    <th>说明</th>
+                                    <th>默认值</th>
+                                    <th>能否为空</th>
+                                    <th>取值范围</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>pageParams.serverUrl</td>
+                                    <td>服务地址</td>
+                                    <td></td>
+                                    <td>N</td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.systemLogo</td>
+                                    <td>系统Logo文件ID</td>
+                                    <td></td>
+                                    <td>Y</td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.systemTitle</td>
+                                    <td>系统主标题</td>
+                                    <td></td>
+                                    <td>N</td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.systemTitleSize</td>
+                                    <td>系统主标题字体大小</td>
+                                    <td>26</td>
+                                    <td>Y</td>
+                                    <td>13+</td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.systemSubTitle</td>
+                                    <td>系统副标题</td>
+                                    <td></td>
+                                    <td>Y</td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.systemSubTitleSize</td>
+                                    <td>系统主标题字体大小</td>
+                                    <td>16</td>
+                                    <td>Y</td>
+                                    <td>13+</td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.copyRightYear</td>
+                                    <td>版权年份</td>
+                                    <td></td>
+                                    <td>Y</td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.copyleft</td>
+                                    <td>版权所属</td>
+                                    <td></td>
+                                    <td>Y</td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.officialUrl</td>
+                                    <td>官方链接</td>
+                                    <td></td>
+                                    <td>Y</td>
+                                    <td></td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.verificationCode</td>
+                                    <td>开启验证码</td>
+                                    <td></td>
+                                    <td>Y</td>
+                                    <td>true | false</td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.loginBoxPosition</td>
+                                    <td>登录框位置</td>
+                                    <td></td>
+                                    <td>N</td>
+                                    <td>left | center | right</td>
+                                </tr>
+                                <tr>
+                                    <td>pageParams.loginFormAction</td>
+                                    <td>form表单action路径</td>
+                                    <td></td>
+                                    <td>N</td>
+                                    <td></td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </li>
+                        <li>5. 表单提交method为<b>POST</b></li>
+                        <li>6. form表单上添加<b>@submit.prevent="submitForm"</b>用于控制表单提交</li>
+                        <li>7. 表单具体内容如下表所示</li>
+                        <li>
+                            <table class="layui-table">
+                                <colgroup>
+                                    <col width="100">
+                                    <col width="120">
+                                    <col>
+                                    <col>
+                                    <col>
+                                </colgroup>
+                                <thead>
+                                <tr>
+                                    <th>名称</th>
+                                    <th>类型</th>
+                                    <th>name值（表单名）</th>
+                                    <th>v-model值（vue绑定值）</th>
+                                    <th>lay-verify值（前端校验）</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr>
+                                    <td>用户名</td>
+                                    <td>input[text]</td>
+                                    <td>username</td>
+                                    <td>formData.username</td>
+                                    <td>username</td>
+                                </tr>
+                                <tr>
+                                    <td>密码</td>
+                                    <td>input[password]</td>
+                                    <td>password</td>
+                                    <td>formData.password</td>
+                                    <td>password</td>
+                                </tr>
+                                <tr>
+                                    <td>验证码</td>
+                                    <td>input[text]</td>
+                                    <td>verificationCode</td>
+                                    <td>formData.verificationCode</td>
+                                    <td>verificationCode</td>
+                                </tr>
+                                <tr>
+                                    <td>记住密码</td>
+                                    <td>input[checkbox]</td>
+                                    <td>remember</td>
+                                    <td>formData.remember</td>
+                                    <td></td>
+                                </tr>
+                                </tbody>
+                            </table>
+                        </li>
+                        <li>8. 图形验证码的地址为：<b>oauth/verification-code/png</b></li>
+                        <li>9. 提交按钮固定写法
+                            <xmp><button type="submit" lay-submit>登 录</button></xmp>
+                        </li>
+                    </ul>
+                </blockquote>
+                <div class="layui-row layui-col-space15">
+                    <div class="layui-col-md8 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单代码 *</label>
+                            <div class="layui-input-block">
+                                <textarea id="formHtml" name="formHtml"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-md4 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单样式</label>
+                            <div class="layui-input-block">
+                                <textarea id="formCss" name="formCss"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <blockquote class="layui-elem-quote">
+                    以下CSS样式控制的是Form表单的对其方式，左、中、右需单独设置。设置完成后，激活表单，在<b>系统配置</b>中控制表单的对其方式。
+                </blockquote>
+                <div class="layui-row layui-col-space15">
+                    <div class="layui-col-md4 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单居左样式</label>
+                            <div class="layui-input-block">
+                                <textarea id="formLeftCss" name="formLeftCss"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-md4 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单居中样式</label>
+                            <div class="layui-input-block">
+                                <textarea id="formCenterCss" name="formCenterCss"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-col-md4 layui-col-xs12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">form表单居右样式</label>
+                            <div class="layui-input-block">
+                                <textarea id="formRightCss" name="formRightCss"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="layui-form-item layui-layout-admin">
+                    <div class="layui-input-block">
+                        <div class="layui-footer" style="left: 0;">
+                            <button type="button" class="layui-btn" lay-submit lay-filter="submitForm">提交编辑</button>
+                            <button type="button" class="layui-btn layui-btn-primary close">返回上级</button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+<script src="assets/js/vendor/viewer/viewer.min.js"></script>
+<script src="assets/js/vendor/codemirror/codemirror.js"></script>
+<script src="assets/js/vendor/codemirror/mode/css/css.js"></script>
+<script src="assets/js/vendor/codemirror/mode/javascript/javascript.js"></script>
+<script src="assets/js/vendor/codemirror/mode/htmlmixed/htmlmixed.js"></script>
+<script src="assets/layuiadmin/layui/layui.js"></script>
+<script>
+    layui.config({
+        base: 'assets/layuiadmin/' //静态资源所在路径
+    }).extend({
+        index: 'lib/index' //主入口模块
+    }).use(['index', 'form', 'laydate'], function(){
+        var $ = layui.$;
+        var form = layui.form;
+        var laytpl = layui.laytpl;
+        var loginFormId = top.restAjax.params(window.location.href).loginFormId;
+        var viewerObj = {};
+
+        function closeBox() {
+            parent.layer.close(parent.layer.getFrameIndex(window.name));
+        }
+
+        function refreshDownloadTemplet(fileName, file) {
+            var dataRander = {};
+            dataRander[fileName] = file;
+
+            laytpl(document.getElementById(fileName +'FileDownload').innerHTML).render(dataRander, function(html) {
+                document.getElementById(fileName +'FileBox').innerHTML = html;
+            });
+        }
+
+        // 初始化文件列表
+        function initFileList(fileName, ids, callback) {
+            var dataForm = {};
+            dataForm[fileName] = ids;
+            form.val('dataForm', dataForm);
+
+            if(!ids) {
+                refreshDownloadTemplet(fileName, []);
+                if(callback) {
+                    callback(fileName, []);
+                }
+                return;
+            }
+
+            top.restAjax.get(top.restAjax.path('api/file/list', []), {
+                ids: ids
+            }, null, function(code, data) {
+                refreshDownloadTemplet(fileName, data);
+                if(callback) {
+                    callback(fileName, data);
+                }
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            });
+        }
+
+        // 初始化预览图预览图上传
+        function initPreviewUploadFile() {
+            var files = $('#preview').val();
+            initFileList('preview', files, function(fileName) {
+                var viewer = new Viewer(document.getElementById(fileName +'FileBox'), {navbar: false});
+                viewerObj[fileName] = viewer;
+            });
+
+            form.on('button(previewUploadFile)', function(obj) {
+                var name = this.dataset.name;
+                var explain = this.dataset.explain;
+                top.dialog.file({
+                    type: 'image',
+                    title: '上传'+ explain,
+                    width: '400px',
+                    height: '420px',
+                    maxFileCount: '1',
+                    onClose: function() {
+                        var uploadFileArray = top.dialog.dialogData.uploadFileArray;
+                        if(typeof(uploadFileArray) != 'undefined' && uploadFileArray.length > 0) {
+                            var files = $('#'+ name).val();
+                            for(var j = 0, file = uploadFileArray[j]; file = uploadFileArray[j++];) {
+                                if(files.length > 0) {
+                                    files += ',';
+                                }
+                                files += file.data;
+                            }
+                            initFileList(name, files, function(fileName) {
+                                viewerObj[fileName].update();
+                            });
+                        }
+                    }
+                });
+            });
+
+            form.on('button(previewRemoveFile)', function(obj) {
+                var name = this.dataset.name;
+                var id = this.dataset.id;
+                var files = $('#'+ name).val().replace(id, '');
+                files = files.replace(/\,+/g, ',');
+                if(files.charAt(0) == ',') {
+                    files = files.substring(1);
+                }
+                if(files.charAt(files.length - 1) == ',') {
+                    files = files.substring(0, files.length - 1);
+                }
+                initFileList(name, files, function(fileName) {
+                    viewerObj[fileName].update();
+                });
+            });
+        }
+
+        function initFormHtml(value) {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formHtml'), {
+                lineNumbers: true,
+                mode: 'htmlmixed',
+                theme: 'dracula'
+            });
+            editor.setValue(value);
+            editor.on('change', function(self, changeValue) {
+                $('#formHtml').val(self.getValue());
+            })
+        }
+
+        function initFormCss(value) {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formCss'), {
+                lineNumbers: true,
+                mode: 'css',
+                theme: 'dracula',
+            });
+            editor.setValue(value);
+            editor.on('change', function(self, changeValue) {
+                $('#formCss').val(self.getValue());
+            })
+        }
+
+        function initFormLeftCss(value) {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formLeftCss'), {
+                lineNumbers: true,
+                mode: 'css',
+                theme: 'dracula'
+            });
+            editor.setValue(value);
+            editor.on('change', function(self, changeValue) {
+                $('#formLeftCss').val(self.getValue());
+            })
+        }
+
+        function initFormCenterCss(value) {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formCenterCss'), {
+                lineNumbers: true,
+                mode: 'css',
+                theme: 'dracula'
+            });
+            editor.setValue(value);
+            editor.on('change', function(self, changeValue) {
+                $('#formCenterCss').val(self.getValue());
+            })
+        }
+
+        function initFormRightCss(value) {
+            var editor = CodeMirror.fromTextArea(document.getElementById('formRightCss'), {
+                lineNumbers: true,
+                mode: 'css',
+                theme: 'dracula'
+            });
+            editor.setValue(value);
+            editor.on('change', function(self, changeValue) {
+                $('#formRightCss').val(self.getValue());
+            })
+        }
+
+        // 初始化
+        function initData() {
+            var loadLayerIndex;
+            top.restAjax.get(top.restAjax.path('api/login-form/get/{loginFormId}', [loginFormId]), {}, null, function(code, data) {
+                form.val('dataForm', {
+                    name: data.name,
+                    summary: data.summary,
+                    isActive: data.isActive,
+                    preview: data.preview,
+                    formHtml: data.formHtml,
+                    formCss: data.formCss,
+                    formLeftCss: data.formLeftCss,
+                    formCenterCss: data.formCenterCss,
+                    formRightCss: data.formRightCss,
+                });
+                form.render(null, 'dataForm');
+
+                initPreviewUploadFile();
+                initFormHtml(data.formHtml);
+                initFormCss(data.formCss);
+                initFormLeftCss(data.formLeftCss);
+                initFormCenterCss(data.formCenterCss);
+                initFormRightCss(data.formRightCss);
+            }, function(code, data) {
+                top.DialogBox.msg(data.msg);
+            }, function() {
+                loadLayerIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
+            }, function() {
+                top.dialog.close(loadLayerIndex);
+            });
+        }
+        initData();
+
+        // 提交表单
+        form.on('submit(submitForm)', function(formData) {
+            top.dialog.confirm(top.dataMessage.commit, function(index) {
+                top.dialog.close(index);
+                var loadLayerIndex;
+                top.restAjax.put(top.restAjax.path('api/login-form/update/{loginFormId}', [loginFormId]), formData.field, null, function(code, data) {
+                    var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
+                        time: 0,
+                        btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
+                        shade: 0.3,
+                        yes: function(index) {
+                            top.dialog.close(index);
+                            window.location.reload();
+                        },
+                        btn2: function() {
+                            closeBox();
+                        }
+                    });
+                }, function(code, data) {
+                    top.dialog.msg(data.msg);
+                }, function() {
+                    loadLayerIndex = top.dialog.msg(top.dataMessage.committing, {icon: 16, time: 0, shade: 0.3});
+                }, function() {
+                    top.dialog.close(loadLayerIndex);
+                });
+            });
+            return false;
+        });
+        $('.close').on('click', function() {
+            closeBox();
+        });
+    });
+</script>
+</body>
+</html>