diff --git a/module-form/src/main/java/ink/wgink/module/form/controller/api/design/FormDesignController.java b/module-form/src/main/java/ink/wgink/module/form/controller/api/design/FormDesignController.java index 46bd7230..17aae1e6 100644 --- a/module-form/src/main/java/ink/wgink/module/form/controller/api/design/FormDesignController.java +++ b/module-form/src/main/java/ink/wgink/module/form/controller/api/design/FormDesignController.java @@ -3,7 +3,17 @@ package ink.wgink.module.form.controller.api.design; import ink.wgink.common.base.DefaultBaseController; import ink.wgink.interfaces.consts.ISystemConstant; +import ink.wgink.module.form.controller.pojo.vos.design.FormDesignVO; +import ink.wgink.module.form.service.design.IFormDesignService; +import ink.wgink.pojo.result.ErrorResult; +import ink.wgink.pojo.result.SuccessResult; import io.swagger.annotations.Api; +import io.swagger.annotations.ApiOperation; +import io.swagger.annotations.ApiResponse; +import io.swagger.annotations.ApiResponses; +import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.web.bind.annotation.PostMapping; +import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @@ -12,6 +22,15 @@ import org.springframework.web.bind.annotation.RestController; @RequestMapping(ISystemConstant.API_PREFIX + "/form-design") public class FormDesignController extends DefaultBaseController { + @Autowired + private IFormDesignService formDesignService; + @ApiOperation(value = "保存表单", notes = "保存表单接口") + @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)}) + @PostMapping("save") + public SuccessResult save(@RequestBody FormDesignVO formDesignVO) { + formDesignService.save(formDesignVO); + return new SuccessResult(); + } } diff --git a/module-form/src/main/java/ink/wgink/module/form/controller/pojo/FormField.java b/module-form/src/main/java/ink/wgink/module/form/controller/pojo/FormField.java new file mode 100644 index 00000000..f46de51f --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/controller/pojo/FormField.java @@ -0,0 +1,48 @@ +package ink.wgink.module.form.controller.pojo; + +/** + * @Description: 基础字段 + * @Author: WenG + * @Date: 2022/3/8 20:24 + * @Version: 1.0 + **/ +public class FormField { + + private String id; + private String tag; + private String label; + private Integer index; + + public String getId() { + return id; + } + + public void setId(String id) { + this.id = id; + } + + public String getTag() { + return tag; + } + + public void setTag(String tag) { + this.tag = tag; + } + + public String getLabel() { + return label; + } + + public void setLabel(String label) { + this.label = label; + } + + public Integer getIndex() { + return index; + } + + public void setIndex(Integer index) { + this.index = index; + } + +} diff --git a/module-form/src/main/java/ink/wgink/module/form/controller/pojo/vos/design/FormDesignVO.java b/module-form/src/main/java/ink/wgink/module/form/controller/pojo/vos/design/FormDesignVO.java new file mode 100644 index 00000000..1ef90b25 --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/controller/pojo/vos/design/FormDesignVO.java @@ -0,0 +1,31 @@ +package ink.wgink.module.form.controller.pojo.vos.design; + +import com.alibaba.fastjson.JSONArray; + +/** + * @Description: 表单设计 + * @Author: WenG + * @Date: 2022/3/8 20:21 + * @Version: 1.0 + **/ +public class FormDesignVO { + + private JSONArray data; + private String code; + + public JSONArray getData() { + return data; + } + + public void setData(JSONArray data) { + this.data = data; + } + + public String getCode() { + return code; + } + + public void setCode(String code) { + this.code = code; + } +} diff --git a/module-form/src/main/java/ink/wgink/module/form/controller/route/design/FormDesignRouteController.java b/module-form/src/main/java/ink/wgink/module/form/controller/route/design/FormDesignRouteController.java new file mode 100644 index 00000000..870e16d2 --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/controller/route/design/FormDesignRouteController.java @@ -0,0 +1,27 @@ +package ink.wgink.module.form.controller.route.design; + +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; + +/** + * @Description: 表单设计 + * @Author: WenG + * @Date: 2022/3/7 11:17 + * @Version: 1.0 + **/ +@Api(tags = ISystemConstant.API_TAGS_SYSTEM_PREFIX + "表单设计") +@Controller +@RequestMapping(ISystemConstant.ROUTE_PREFIX + "/form-design") +public class FormDesignRouteController { + + @GetMapping("save") + public ModelAndView save() { + ModelAndView mv = new ModelAndView("/form-design/save"); + return mv; + } + +} diff --git a/module-form/src/main/java/ink/wgink/module/form/controller/staticfile/FormDesignStaticController.java b/module-form/src/main/java/ink/wgink/module/form/controller/staticfile/FormDesignStaticController.java new file mode 100644 index 00000000..12b9359e --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/controller/staticfile/FormDesignStaticController.java @@ -0,0 +1,54 @@ +/* Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +package ink.wgink.module.form.controller.staticfile; + +import ink.wgink.util.ResourceUtil; +import ink.wgink.util.request.StaticResourceRequestUtil; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.PathVariable; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RestController; + +import javax.servlet.http.HttpServletResponse; +import java.io.IOException; +import java.io.InputStream; + +@RestController +@RequestMapping("static/form-design") +public class FormDesignStaticController { + + @GetMapping("images/{fileName}") + public void images(HttpServletResponse httpServletResponse, @PathVariable("fileName") String fileName) throws IOException { + InputStream inputStream = ResourceUtil.getJarResourceInputStream("static/form-design/images/" + fileName); + StaticResourceRequestUtil.download(httpServletResponse, inputStream, fileName); + } + + @GetMapping("js/{fileName}") + public void js(HttpServletResponse httpServletResponse, @PathVariable("fileName") String fileName) throws IOException { + InputStream inputStream = ResourceUtil.getJarResourceInputStream("static/form-design/js/" + fileName); + StaticResourceRequestUtil.download(httpServletResponse, inputStream, fileName); + } + + @GetMapping("modules/{fileName}") + public void modules(HttpServletResponse httpServletResponse, @PathVariable("fileName") String fileName) throws IOException { + InputStream inputStream = ResourceUtil.getJarResourceInputStream("static/form-design/modules/" + fileName); + StaticResourceRequestUtil.download(httpServletResponse, inputStream, fileName); + } + + @GetMapping("modules/{sub}/{fileName}") + public void modulesSum(HttpServletResponse httpServletResponse, @PathVariable("sub") String sub, @PathVariable("fileName") String fileName) throws IOException { + InputStream inputStream = ResourceUtil.getJarResourceInputStream("static/form-design/modules/" + sub + "/" + fileName); + StaticResourceRequestUtil.download(httpServletResponse, inputStream, fileName); + } + +} diff --git a/module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java b/module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java new file mode 100644 index 00000000..eff3a93a --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java @@ -0,0 +1,50 @@ +package ink.wgink.module.form.enums.design; + +/** + * @Description: 表单字段类型 + * @Author: WenG + * @Date: 2022/3/8 20:40 + * @Version: 1.0 + **/ +public enum FormFieldTypeEnum { + + INPUT("input", "单行文本"), + PASSWORD("password", "密码框"), + SELECT("select", "下拉框"), + RADIO("radio", "单选组"), + CHECKBOX("checkbox", "复选组"), + SWITCH("switch", "开关"), + SLIDER("slider", "滑块"), + NUMBER_INPUT("numberInput", "数字输入框"), + LABEL_GENERATION("labelGeneration", "标签组件"), + BOTTOM("bottom", "按钮组件"), + SIGN("sign", "签名组件"), + ICON_PICKER("iconPicker", "图标选择器"), + CRON("cron", "Cron表达式"), + DATE("date", "日期"), + DATE_RANGE("dateRange", "日期范围"), + RATE("rate", "评分"), + CAROUSEL("carousel", "轮播图"), + COLOR_PICKER("colorpicker", "颜色选择器"), + IMAGE("image", "上传图片"), + FILE("file", "上传文件"), + TEXTAREA("textarea", "多行文本"), + EDITOR("editor", "编辑器"), + GRID("grid", "布局网格"); + + private String type; + private String label; + + FormFieldTypeEnum(String type, String label) { + this.type = type; + this.label = label; + } + + public String getType() { + return type; + } + + public String getLabel() { + return label; + } +} diff --git a/module-form/src/main/java/ink/wgink/module/form/service/design/IFormDesignService.java b/module-form/src/main/java/ink/wgink/module/form/service/design/IFormDesignService.java new file mode 100644 index 00000000..2edb65fe --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/service/design/IFormDesignService.java @@ -0,0 +1,20 @@ +package ink.wgink.module.form.service.design; + +import ink.wgink.module.form.controller.pojo.vos.design.FormDesignVO; + +/** + * @Description: 表单设计 + * @Author: WenG + * @Date: 2022/3/7 10:53 + * @Version: 1.0 + **/ +public interface IFormDesignService { + + /** + * 保存表单 + * + * @param formDesignVO + */ + void save(FormDesignVO formDesignVO); + +} diff --git a/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java b/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java new file mode 100644 index 00000000..d1cd57eb --- /dev/null +++ b/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java @@ -0,0 +1,34 @@ +package ink.wgink.module.form.service.design.impl; + +import com.alibaba.fastjson.JSONArray; +import ink.wgink.common.base.DefaultBaseService; +import ink.wgink.module.form.controller.pojo.FormField; +import ink.wgink.module.form.controller.pojo.vos.design.FormDesignVO; +import ink.wgink.module.form.service.design.IFormDesignService; +import org.springframework.stereotype.Service; + +import java.util.ArrayList; +import java.util.List; + +/** + * @Description: 表单设计 + * @Author: WenG + * @Date: 2022/3/7 10:53 + * @Version: 1.0 + **/ +@Service +public class FormDesignServiceImpl extends DefaultBaseService implements IFormDesignService { + + + @Override + public void save(FormDesignVO formDesignVO) { + + } + + private void setFormField(List formFields, JSONArray dataJsonArray) { + formFields = formFields == null ? new ArrayList<>() : formFields; + for (int i = 0; i < dataJsonArray.size(); i++) { + // grid特殊，需要递归处理 + } + } +} diff --git a/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormServiceImpl.java b/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormServiceImpl.java index 604c4c24..dbced309 100644 --- a/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormServiceImpl.java +++ b/module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormServiceImpl.java @@ -5,7 +5,6 @@ import com.github.pagehelper.PageInfo; import ink.wgink.common.base.DefaultBaseService; import ink.wgink.module.form.dao.design.IFormDao; import ink.wgink.module.form.pojo.dtos.design.FormDTO; -import ink.wgink.module.form.pojo.dtos.design.FormFieldDTO; import ink.wgink.module.form.pojo.pos.design.FormPO; import ink.wgink.module.form.pojo.vos.design.FormVO; import ink.wgink.module.form.service.design.IFormService; @@ -108,5 +107,4 @@ public class FormServiceImpl extends DefaultBaseService implements IFormService return new SuccessResultList<>(dataDTOs, pageInfo.getPageNum(), pageInfo.getTotal()); } - } diff --git a/module-form/src/main/resources/static/form-design/images/88_thumb.gif b/module-form/src/main/resources/static/form-design/images/88_thumb.gif new file mode 100644 index 00000000..5dd7442b Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/88_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/angrya_thumb.gif b/module-form/src/main/resources/static/form-design/images/angrya_thumb.gif new file mode 100644 index 00000000..45c4fb55 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/angrya_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/banner1.PNG b/module-form/src/main/resources/static/form-design/images/banner1.PNG new file mode 100644 index 00000000..ab58508b Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/banner1.PNG differ diff --git a/module-form/src/main/resources/static/form-design/images/banner2.PNG b/module-form/src/main/resources/static/form-design/images/banner2.PNG new file mode 100644 index 00000000..fdfc4b4d Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/banner2.PNG differ diff --git a/module-form/src/main/resources/static/form-design/images/banner3.PNG b/module-form/src/main/resources/static/form-design/images/banner3.PNG new file mode 100644 index 00000000..1a655f6e Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/banner3.PNG differ diff --git a/module-form/src/main/resources/static/form-design/images/bba_thumb.gif b/module-form/src/main/resources/static/form-design/images/bba_thumb.gif new file mode 100644 index 00000000..0b4a8832 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/bba_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/bs2_thumb.gif b/module-form/src/main/resources/static/form-design/images/bs2_thumb.gif new file mode 100644 index 00000000..556c7e32 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/bs2_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/bs_thumb.gif b/module-form/src/main/resources/static/form-design/images/bs_thumb.gif new file mode 100644 index 00000000..b9c715c5 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/bs_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/bz_thumb.gif b/module-form/src/main/resources/static/form-design/images/bz_thumb.gif new file mode 100644 index 00000000..60447400 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/bz_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/cake.gif b/module-form/src/main/resources/static/form-design/images/cake.gif new file mode 100644 index 00000000..5080dc36 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/cake.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/cj_thumb.gif b/module-form/src/main/resources/static/form-design/images/cj_thumb.gif new file mode 100644 index 00000000..f7715bf5 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/cj_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/come_thumb.gif b/module-form/src/main/resources/static/form-design/images/come_thumb.gif new file mode 100644 index 00000000..0bf130f0 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/come_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/cool_thumb.gif b/module-form/src/main/resources/static/form-design/images/cool_thumb.gif new file mode 100644 index 00000000..6de432ae Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/cool_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/crazya_thumb.gif b/module-form/src/main/resources/static/form-design/images/crazya_thumb.gif new file mode 100644 index 00000000..0eb1434b Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/crazya_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/cry.gif b/module-form/src/main/resources/static/form-design/images/cry.gif new file mode 100644 index 00000000..b9842128 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/cry.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/cza_thumb.gif b/module-form/src/main/resources/static/form-design/images/cza_thumb.gif new file mode 100644 index 00000000..fc5a0cfa Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/cza_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/dizzya_thumb.gif b/module-form/src/main/resources/static/form-design/images/dizzya_thumb.gif new file mode 100644 index 00000000..ae429912 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/dizzya_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/good_thumb.gif b/module-form/src/main/resources/static/form-design/images/good_thumb.gif new file mode 100644 index 00000000..e289d929 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/good_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/gza_thumb.gif b/module-form/src/main/resources/static/form-design/images/gza_thumb.gif new file mode 100644 index 00000000..38b84a51 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/gza_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/h_thumb.gif b/module-form/src/main/resources/static/form-design/images/h_thumb.gif new file mode 100644 index 00000000..ac0b7008 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/h_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/hatea_thumb.gif b/module-form/src/main/resources/static/form-design/images/hatea_thumb.gif new file mode 100644 index 00000000..8b1c88a3 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/hatea_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/hearta_thumb.gif b/module-form/src/main/resources/static/form-design/images/hearta_thumb.gif new file mode 100644 index 00000000..58a08361 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/hearta_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/heia_thumb.gif b/module-form/src/main/resources/static/form-design/images/heia_thumb.gif new file mode 100644 index 00000000..300bbc2a Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/heia_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/hsa_thumb.gif b/module-form/src/main/resources/static/form-design/images/hsa_thumb.gif new file mode 100644 index 00000000..d05f2da4 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/hsa_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/k_thumb.gif b/module-form/src/main/resources/static/form-design/images/k_thumb.gif new file mode 100644 index 00000000..f35928a2 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/k_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/kbsa_thumb.gif b/module-form/src/main/resources/static/form-design/images/kbsa_thumb.gif new file mode 100644 index 00000000..4e8b09f1 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/kbsa_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/kl_thumb.gif b/module-form/src/main/resources/static/form-design/images/kl_thumb.gif new file mode 100644 index 00000000..d52200c5 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/kl_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/laugh.gif b/module-form/src/main/resources/static/form-design/images/laugh.gif new file mode 100644 index 00000000..7edbb58a Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/laugh.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/lazu_thumb.gif b/module-form/src/main/resources/static/form-design/images/lazu_thumb.gif new file mode 100644 index 00000000..d2048730 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/lazu_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/ldln_thumb.gif b/module-form/src/main/resources/static/form-design/images/ldln_thumb.gif new file mode 100644 index 00000000..39cd0353 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/ldln_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/lovea_thumb.gif b/module-form/src/main/resources/static/form-design/images/lovea_thumb.gif new file mode 100644 index 00000000..2bfc58be Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/lovea_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/mb_thumb.gif b/module-form/src/main/resources/static/form-design/images/mb_thumb.gif new file mode 100644 index 00000000..34f28e4c Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/mb_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/money_thumb.gif b/module-form/src/main/resources/static/form-design/images/money_thumb.gif new file mode 100644 index 00000000..a334548e Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/money_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/nm_thumb.gif b/module-form/src/main/resources/static/form-design/images/nm_thumb.gif new file mode 100644 index 00000000..d4e24afc Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/nm_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/no_thumb.gif b/module-form/src/main/resources/static/form-design/images/no_thumb.gif new file mode 100644 index 00000000..4351083a Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/no_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/ok_thumb.gif b/module-form/src/main/resources/static/form-design/images/ok_thumb.gif new file mode 100644 index 00000000..39f8a228 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/ok_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/qq_thumb.gif b/module-form/src/main/resources/static/form-design/images/qq_thumb.gif new file mode 100644 index 00000000..43b6d0a4 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/qq_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/sad_thumb.gif b/module-form/src/main/resources/static/form-design/images/sad_thumb.gif new file mode 100644 index 00000000..0f065087 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/sad_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/sada_thumb.gif b/module-form/src/main/resources/static/form-design/images/sada_thumb.gif new file mode 100644 index 00000000..1c321c7e Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/sada_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/sb_thumb.gif b/module-form/src/main/resources/static/form-design/images/sb_thumb.gif new file mode 100644 index 00000000..c9f25fa1 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/sb_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/shamea_thumb.gif b/module-form/src/main/resources/static/form-design/images/shamea_thumb.gif new file mode 100644 index 00000000..e6d4db80 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/shamea_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/sk_thumb.gif b/module-form/src/main/resources/static/form-design/images/sk_thumb.gif new file mode 100644 index 00000000..b751f98a Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/sk_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/sleepa_thumb.gif b/module-form/src/main/resources/static/form-design/images/sleepa_thumb.gif new file mode 100644 index 00000000..59111a38 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/sleepa_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/sleepya_thumb.gif b/module-form/src/main/resources/static/form-design/images/sleepya_thumb.gif new file mode 100644 index 00000000..7c7ee0d5 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/sleepya_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/sw_thumb.gif b/module-form/src/main/resources/static/form-design/images/sw_thumb.gif new file mode 100644 index 00000000..a9322643 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/sw_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/sweata_thumb.gif b/module-form/src/main/resources/static/form-design/images/sweata_thumb.gif new file mode 100644 index 00000000..c9476d79 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/sweata_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/t_thumb.gif b/module-form/src/main/resources/static/form-design/images/t_thumb.gif new file mode 100644 index 00000000..e05e0f97 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/t_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/tootha_thumb.gif b/module-form/src/main/resources/static/form-design/images/tootha_thumb.gif new file mode 100644 index 00000000..b2b78b21 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/tootha_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/tza_thumb.gif b/module-form/src/main/resources/static/form-design/images/tza_thumb.gif new file mode 100644 index 00000000..86df67b7 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/tza_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/unheart.gif b/module-form/src/main/resources/static/form-design/images/unheart.gif new file mode 100644 index 00000000..7ffd1613 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/unheart.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/wq_thumb.gif b/module-form/src/main/resources/static/form-design/images/wq_thumb.gif new file mode 100644 index 00000000..1f0bd8b0 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/wq_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/x_thumb.gif b/module-form/src/main/resources/static/form-design/images/x_thumb.gif new file mode 100644 index 00000000..50631a6e Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/x_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/ye_thumb.gif b/module-form/src/main/resources/static/form-design/images/ye_thumb.gif new file mode 100644 index 00000000..a181ee77 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/ye_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/yhh_thumb.gif b/module-form/src/main/resources/static/form-design/images/yhh_thumb.gif new file mode 100644 index 00000000..7bce2997 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/yhh_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/yw_thumb.gif b/module-form/src/main/resources/static/form-design/images/yw_thumb.gif new file mode 100644 index 00000000..7a4c0131 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/yw_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/yx_thumb.gif b/module-form/src/main/resources/static/form-design/images/yx_thumb.gif new file mode 100644 index 00000000..ad444976 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/yx_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/z2_thumb.gif b/module-form/src/main/resources/static/form-design/images/z2_thumb.gif new file mode 100644 index 00000000..e0eff222 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/z2_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/zhh_thumb.gif b/module-form/src/main/resources/static/form-design/images/zhh_thumb.gif new file mode 100644 index 00000000..adac542f Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/zhh_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/images/zy_thumb.gif b/module-form/src/main/resources/static/form-design/images/zy_thumb.gif new file mode 100644 index 00000000..66f967b4 Binary files /dev/null and b/module-form/src/main/resources/static/form-design/images/zy_thumb.gif differ diff --git a/module-form/src/main/resources/static/form-design/js/config.js b/module-form/src/main/resources/static/form-design/js/config.js new file mode 100644 index 00000000..c9ad1c31 --- /dev/null +++ b/module-form/src/main/resources/static/form-design/js/config.js @@ -0,0 +1,13 @@ +/** + * layui 项目的全局配置 + * +*/ +layui.config({ + //dir: '/res/layui/', //layui.js 所在路径（注意，如果是 script 单独引入 layui.js，无需设定该参数。），一般情况下可以无视 + version: false, //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610 + debug: false, //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面 + base: './form-design/modules/', //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展 + }).use(['layer'],function(){ + var $ = layui.jquery; + var layer = layui.layer; + }); \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/js/htmlformat.js b/module-form/src/main/resources/static/form-design/js/htmlformat.js new file mode 100644 index 00000000..1f5ebf1f --- /dev/null +++ b/module-form/src/main/resources/static/form-design/js/htmlformat.js @@ -0,0 +1,409 @@ +function style_html(html_source, indent_size, indent_character, max_char) { + //Wrapper function to invoke all the necessary constructors and deal with the output. + + var Parser, multi_parser; + + function Parser() { + + this.pos = 0; //Parser position + this.token = ''; + this.current_mode = 'CONTENT'; //reflects the current Parser mode: TAG/CONTENT + this.tags = { //An object to hold tags, their position, and their parent-tags, initiated with default values + parent: 'parent1', + parentcount: 1, + parent1: '' + }; + this.tag_type = ''; + this.token_text = this.last_token = this.last_text = this.token_type = ''; + + + this.Utils = { //Uilities made available to the various functions + whitespace: "\n\r\t ".split(''), + single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','), //all the single tags for HTML + extra_liners: 'head,body,/html'.split(','), //for tags that need a line of whitespace before them + in_array: function (what, arr) { + for (var i=0; i= this.input.length) { + return content.length?content.join(''):['', 'TK_EOF']; + } + + char = this.input.charAt(this.pos); + this.pos++; + this.line_char_count++; + + + if (this.Utils.in_array(char, this.Utils.whitespace)) { + if (content.length) { + space = true; + } + this.line_char_count--; + continue; //don't want to insert unnecessary space + } + else if (space) { + if (this.line_char_count >= this.max_char) { //insert a line when the max_char is reached + content.push('\n'); + for (var i=0; i', 'igm'); + reg_match.lastIndex = this.pos; + var reg_array = reg_match.exec(this.input); + var end_script = reg_array?reg_array.index:this.input.length; //absolute end of script + while(this.pos < end_script) { //get everything in between the script tags + if (this.pos >= this.input.length) { + return content.length?content.join(''):['', 'TK_EOF']; + } + + char = this.input.charAt(this.pos); + this.pos++; + + + content.push(char); + } + return content.length?content.join(''):''; //we might not have any content at all + } + + this.record_tag = function (tag){ //function to record a tag and its parent in this.tags Object + if (this.tags[tag + 'count']) { //check for the existence of this tag type + this.tags[tag + 'count']++; + this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level + } + else { //otherwise initialize this tag type + this.tags[tag + 'count'] = 1; + this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level + } + this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent; //set the parent (i.e. in the case of a div this.tags.div1parent) + this.tags.parent = tag + this.tags[tag + 'count']; //and make this the current parent (i.e. in the case of a div 'div1') + } + + this.retrieve_tag = function (tag) { //function to retrieve the opening tag to the corresponding closer + if (this.tags[tag + 'count']) { //if the openener is not in the Object we ignore it + var temp_parent = this.tags.parent; //check to see if it's a closable tag. + while (temp_parent) { //till we reach '' (the initial value); + if (tag + this.tags[tag + 'count'] === temp_parent) { //if this is it use it + break; + } + temp_parent = this.tags[temp_parent + 'parent']; //otherwise keep on climbing up the DOM Tree + } + if (temp_parent) { //if we caught something + this.indent_level = this.tags[tag + this.tags[tag + 'count']]; //set the indent_level accordingly + this.tags.parent = this.tags[temp_parent + 'parent']; //and set the current parent + } + delete this.tags[tag + this.tags[tag + 'count'] + 'parent']; //delete the closed tags parent reference... + delete this.tags[tag + this.tags[tag + 'count']]; //...and the tag itself + if (this.tags[tag + 'count'] == 1) { + delete this.tags[tag + 'count']; + } + else { + this.tags[tag + 'count']--; + } + } + } + + this.get_tag = function () { //function to get a full tag and parse its type + var char = ''; + var content = []; + var space = false; + + do { + if (this.pos >= this.input.length) { + return content.length?content.join(''):['', 'TK_EOF']; + } + + char = this.input.charAt(this.pos); + this.pos++; + this.line_char_count++; + + if (this.Utils.in_array(char, this.Utils.whitespace)) { //don't want to insert unnecessary space + space = true; + this.line_char_count--; + continue; + } + + if (char === "'" || char === '"') { + if (!content[1] || content[1] !== '!') { //if we're in a comment strings don't get treated specially + char += this.get_unformatted(char); + space = true; + } + } + + if (char === '=') { //no space before = + space = false; + } + + if (content.length && content[content.length-1] !== '=' && char !== '>' + && space) { //no space after = or before > + if (this.line_char_count >= this.max_char) { + this.print_newline(false, content); + this.line_char_count = 0; + } + else { + content.push(' '); + this.line_char_count++; + } + space = false; + } + content.push(char); //inserts character at-a-time (or string) + } while (char !== '>'); + + var tag_complete = content.join(''); + var tag_index; + if (tag_complete.indexOf(' ') != -1) { //if there's whitespace, thats where the tag name ends + tag_index = tag_complete.indexOf(' '); + } + else { //otherwise go with the tag ending + tag_index = tag_complete.indexOf('>'); + } + var tag_check = tag_complete.substring(1, tag_index).toLowerCase(); + if (tag_complete.charAt(tag_complete.length-2) === '/' || + this.Utils.in_array(tag_check, this.Utils.single_token)) { //if this tag name is a single tag type (either in the list or has a closing /) + this.tag_type = 'SINGLE'; + } + else if (tag_check === 'script') { //for later script handling + this.record_tag(tag_check); + this.tag_type = 'SCRIPT'; + } + else if (tag_check === 'style') { //for future style handling (for now it justs uses get_content) + this.record_tag(tag_check); + this.tag_type = 'STYLE'; + } + else if (tag_check.charAt(0) === '!') { //peek for so... + var comment = this.get_unformatted('-->', tag_complete); //...delegate to get_unformatted + content.push(comment); + } + this.tag_type = 'START'; + } + else if (tag_check.indexOf('[endif') != -1) {//peek for ', tag_complete); + content.push(comment); + this.tag_type = 'SINGLE'; + } + } + else { + if (tag_check.charAt(0) === '/') { //this tag is a double tag so check for tag-ending + this.retrieve_tag(tag_check.substring(1)); //remove it and all ancestors + this.tag_type = 'END'; + } + else { //otherwise it's a start-tag + this.record_tag(tag_check); //push it on the tag stack + this.tag_type = 'START'; + } + if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) { //check if this double needs an extra line + this.print_newline(true, this.output); + } + } + return content.join(''); //returns fully formatted tag + } + + this.get_unformatted = function (delimiter, orig_tag) { //function to return unformatted content in its entirety + + if (orig_tag && orig_tag.indexOf(delimiter) != -1) { + return ''; + } + var char = ''; + var content = ''; + var space = true; + do { + + + char = this.input.charAt(this.pos); + this.pos++ + + if (this.Utils.in_array(char, this.Utils.whitespace)) { + if (!space) { + this.line_char_count--; + continue; + } + if (char === '\n' || char === '\r') { + content += '\n'; + for (var i=0; i 0) { + this.indent_level--; + } + } + } + return this; + } + + /*_____________________--------------------_____________________*/ + + + + multi_parser = new Parser(); //wrapping functions Parser + multi_parser.printer(html_source, indent_character, indent_size); //initialize starting values + + + + while (true) { + var t = multi_parser.get_token(); + multi_parser.token_text = t[0]; + multi_parser.token_type = t[1]; + + if (multi_parser.token_type === 'TK_EOF') { + break; + } + + + switch (multi_parser.token_type) { + case 'TK_TAG_START': case 'TK_TAG_SCRIPT': case 'TK_TAG_STYLE': + multi_parser.print_newline(false, multi_parser.output); + multi_parser.print_token(multi_parser.token_text); + multi_parser.indent(); + multi_parser.current_mode = 'CONTENT'; + break; + case 'TK_TAG_END': + multi_parser.print_newline(true, multi_parser.output); + multi_parser.print_token(multi_parser.token_text); + multi_parser.current_mode = 'CONTENT'; + break; + case 'TK_TAG_SINGLE': + multi_parser.print_newline(false, multi_parser.output); + multi_parser.print_token(multi_parser.token_text); + multi_parser.current_mode = 'CONTENT'; + break; + case 'TK_CONTENT': + if (multi_parser.token_text !== '') { + multi_parser.print_newline(false, multi_parser.output); + multi_parser.print_token(multi_parser.token_text); + } + multi_parser.current_mode = 'TAG'; + break; + } + multi_parser.last_token = multi_parser.token_type; + multi_parser.last_text = multi_parser.token_text; + } + return multi_parser.output.join(''); + } + \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/js/jsformat.js b/module-form/src/main/resources/static/form-design/js/jsformat.js new file mode 100644 index 00000000..a2791d7e --- /dev/null +++ b/module-form/src/main/resources/static/form-design/js/jsformat.js @@ -0,0 +1,568 @@ + + +function js_beautify(js_source_text, indent_size, indent_character, indent_level) +{ + + var input, output, token_text, last_type, last_text, last_word, current_mode, modes, indent_string; + var whitespace, wordchar, punct, parser_pos, line_starters, in_case; + var prefix, token_type, do_block_just_closed, var_line, var_line_tainted; + + + + function trim_output() + { + while (output.length && (output[output.length - 1] === ' ' || output[output.length - 1] === indent_string)) { + output.pop(); + } + } + + function print_newline(ignore_repeated) + { + ignore_repeated = typeof ignore_repeated === 'undefined' ? true: ignore_repeated; + + trim_output(); + + if (!output.length) { + return; // no newline on start of file + } + + if (output[output.length - 1] !== "\n" || !ignore_repeated) { + output.push("\n"); + } + for (var i = 0; i < indent_level; i++) { + output.push(indent_string); + } + } + + + + function print_space() + { + var last_output = output.length ? output[output.length - 1] : ' '; + if (last_output !== ' ' && last_output !== '\n' && last_output !== indent_string) { // prevent occassional duplicate space + output.push(' '); + } + } + + + function print_token() + { + output.push(token_text); + } + + function indent() + { + indent_level++; + } + + + function unindent() + { + if (indent_level) { + indent_level--; + } + } + + + function remove_indent() + { + if (output.length && output[output.length - 1] === indent_string) { + output.pop(); + } + } + + + function set_mode(mode) + { + modes.push(current_mode); + current_mode = mode; + } + + + function restore_mode() + { + do_block_just_closed = current_mode === 'DO_BLOCK'; + current_mode = modes.pop(); + } + + + function in_array(what, arr) + { + for (var i = 0; i < arr.length; i++) + { + if (arr[i] === what) { + return true; + } + } + return false; + } + + + + function get_next_token() + { + var n_newlines = 0; + var c = ''; + + do { + if (parser_pos >= input.length) { + return ['', 'TK_EOF']; + } + c = input.charAt(parser_pos); + + parser_pos += 1; + if (c === "\n") { + n_newlines += 1; + } + } + while (in_array(c, whitespace)); + + if (n_newlines > 1) { + for (var i = 0; i < 2; i++) { + print_newline(i === 0); + } + } + var wanted_newline = (n_newlines === 1); + + + if (in_array(c, wordchar)) { + if (parser_pos < input.length) { + while (in_array(input.charAt(parser_pos), wordchar)) { + c += input.charAt(parser_pos); + parser_pos += 1; + if (parser_pos === input.length) { + break; + } + } + } + + // small and surprisingly unugly hack for 1E-10 representation + if (parser_pos !== input.length && c.match(/^[0-9]+[Ee]$/) && input.charAt(parser_pos) === '-') { + parser_pos += 1; + + var t = get_next_token(parser_pos); + c += '-' + t[0]; + return [c, 'TK_WORD']; + } + + if (c === 'in') { // hack for 'in' operator + return [c, 'TK_OPERATOR']; + } + return [c, 'TK_WORD']; + } + + if (c === '(' || c === '[') { + return [c, 'TK_START_EXPR']; + } + + if (c === ')' || c === ']') { + return [c, 'TK_END_EXPR']; + } + + if (c === '{') { + return [c, 'TK_START_BLOCK']; + } + + if (c === '}') { + return [c, 'TK_END_BLOCK']; + } + + if (c === ';') { + return [c, 'TK_END_COMMAND']; + } + + if (c === '/') { + var comment = ''; + // peek for comment /* ... */ + if (input.charAt(parser_pos) === '*') { + parser_pos += 1; + if (parser_pos < input.length) { + while (! (input.charAt(parser_pos) === '*' && input.charAt(parser_pos + 1) && input.charAt(parser_pos + 1) === '/') && parser_pos < input.length) { + comment += input.charAt(parser_pos); + parser_pos += 1; + if (parser_pos >= input.length) { + break; + } + } + } + parser_pos += 2; + return ['/*' + comment + '*/', 'TK_BLOCK_COMMENT']; + } + // peek for comment // ... + if (input.charAt(parser_pos) === '/') { + comment = c; + while (input.charAt(parser_pos) !== "\x0d" && input.charAt(parser_pos) !== "\x0a") { + comment += input.charAt(parser_pos); + parser_pos += 1; + if (parser_pos >= input.length) { + break; + } + } + parser_pos += 1; + if (wanted_newline) { + print_newline(); + } + return [comment, 'TK_COMMENT']; + } + + } + + if (c === "'" || // string + c === '"' || // string + (c === '/' && + ((last_type === 'TK_WORD' && last_text === 'return') || (last_type === 'TK_START_EXPR' || last_type === 'TK_END_BLOCK' || last_type === 'TK_OPERATOR' || last_type === 'TK_EOF' || last_type === 'TK_END_COMMAND')))) { // regexp + var sep = c; + var esc = false; + c = ''; + + if (parser_pos < input.length) { + + while (esc || input.charAt(parser_pos) !== sep) { + c += input.charAt(parser_pos); + if (!esc) { + esc = input.charAt(parser_pos) === '\\'; + } else { + esc = false; + } + parser_pos += 1; + if (parser_pos >= input.length) { + break; + } + } + + } + + parser_pos += 1; + if (last_type === 'TK_END_COMMAND') { + print_newline(); + } + return [sep + c + sep, 'TK_STRING']; + } + + if (in_array(c, punct)) { + while (parser_pos < input.length && in_array(c + input.charAt(parser_pos), punct)) { + c += input.charAt(parser_pos); + parser_pos += 1; + if (parser_pos >= input.length) { + break; + } + } + return [c, 'TK_OPERATOR']; + } + + return [c, 'TK_UNKNOWN']; + } + + + //---------------------------------- + + indent_character = indent_character || ' '; + indent_size = indent_size || 4; + + indent_string = ''; + while (indent_size--) { + indent_string += indent_character; + } + + input = js_source_text; + + last_word = ''; // last 'TK_WORD' passed + last_type = 'TK_START_EXPR'; // last token type + last_text = ''; // last token text + output = []; + + do_block_just_closed = false; + var_line = false; + var_line_tainted = false; + + whitespace = "\n\r\t ".split(''); + wordchar = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_$'.split(''); + punct = '+ - * / % & ++ -- = += -= *= /= %= == === != !== > < >= <= >> << >>> >>>= >>= <<= && &= | || ! !! , : ? ^ ^= |='.split(' '); + + // words which should always start on new line. + line_starters = 'continue,try,throw,return,var,if,switch,case,default,for,while,break,function'.split(','); + + // states showing if we are currently in expression (i.e. "if" case) - 'EXPRESSION', or in usual block (like, procedure), 'BLOCK'. + // some formatting depends on that. + current_mode = 'BLOCK'; + modes = [current_mode]; + + indent_level = indent_level || 0; + parser_pos = 0; // parser position + in_case = false; // flag for parser that case/default has been processed, and next colon needs special attention + while (true) { + var t = get_next_token(parser_pos); + token_text = t[0]; + token_type = t[1]; + if (token_type === 'TK_EOF') { + break; + } + + switch (token_type) { + + case 'TK_START_EXPR': + var_line = false; + set_mode('EXPRESSION'); + if (last_type === 'TK_END_EXPR' || last_type === 'TK_START_EXPR') { + // do nothing on (( and )( and ][ and ]( .. + } else if (last_type !== 'TK_WORD' && last_type !== 'TK_OPERATOR') { + print_space(); + } else if (in_array(last_word, line_starters) && last_word !== 'function') { + print_space(); + } + print_token(); + break; + + case 'TK_END_EXPR': + print_token(); + restore_mode(); + break; + + case 'TK_START_BLOCK': + + if (last_word === 'do') { + set_mode('DO_BLOCK'); + } else { + set_mode('BLOCK'); + } + if (last_type !== 'TK_OPERATOR' && last_type !== 'TK_START_EXPR') { + if (last_type === 'TK_START_BLOCK') { + print_newline(); + } else { + print_space(); + } + } + print_token(); + indent(); + break; + + case 'TK_END_BLOCK': + if (last_type === 'TK_START_BLOCK') { + // nothing + trim_output(); + unindent(); + } else { + unindent(); + print_newline(); + } + print_token(); + restore_mode(); + break; + + case 'TK_WORD': + + if (do_block_just_closed) { + print_space(); + print_token(); + print_space(); + break; + } + + if (token_text === 'case' || token_text === 'default') { + if (last_text === ':') { + // switch cases following one another + remove_indent(); + } else { + // case statement starts in the same line where switch + unindent(); + print_newline(); + indent(); + } + print_token(); + in_case = true; + break; + } + + + prefix = 'NONE'; + if (last_type === 'TK_END_BLOCK') { + if (!in_array(token_text.toLowerCase(), ['else', 'catch', 'finally'])) { + prefix = 'NEWLINE'; + } else { + prefix = 'SPACE'; + print_space(); + } + } else if (last_type === 'TK_END_COMMAND' && (current_mode === 'BLOCK' || current_mode === 'DO_BLOCK')) { + prefix = 'NEWLINE'; + } else if (last_type === 'TK_END_COMMAND' && current_mode === 'EXPRESSION') { + prefix = 'SPACE'; + } else if (last_type === 'TK_WORD') { + prefix = 'SPACE'; + } else if (last_type === 'TK_START_BLOCK') { + prefix = 'NEWLINE'; + } else if (last_type === 'TK_END_EXPR') { + print_space(); + prefix = 'NEWLINE'; + } + + if (last_type !== 'TK_END_BLOCK' && in_array(token_text.toLowerCase(), ['else', 'catch', 'finally'])) { + print_newline(); + } else if (in_array(token_text, line_starters) || prefix === 'NEWLINE') { + if (last_text === 'else') { + // no need to force newline on else break + print_space(); + } else if ((last_type === 'TK_START_EXPR' || last_text === '=') && token_text === 'function') { + // no need to force newline on 'function': (function + // DONOTHING + } else if (last_type === 'TK_WORD' && (last_text === 'return' || last_text === 'throw')) { + // no newline between 'return nnn' + print_space(); + } else if (last_type !== 'TK_END_EXPR') { + if ((last_type !== 'TK_START_EXPR' || token_text !== 'var') && last_text !== ':') { + // no need to force newline on 'var': for (var x = 0...) + if (token_text === 'if' && last_type === 'TK_WORD' && last_word === 'else') { + // no newline for } else if { + print_space(); + } else { + print_newline(); + } + } + } else { + if (in_array(token_text, line_starters) && last_text !== ')') { + print_newline(); + } + } + } else if (prefix === 'SPACE') { + print_space(); + } + print_token(); + last_word = token_text; + + if (token_text === 'var') { + var_line = true; + var_line_tainted = false; + } + + break; + + case 'TK_END_COMMAND': + + print_token(); + var_line = false; + break; + + case 'TK_STRING': + + if (last_type === 'TK_START_BLOCK' || last_type === 'TK_END_BLOCK') { + print_newline(); + } else if (last_type === 'TK_WORD') { + print_space(); + } + print_token(); + break; + + case 'TK_OPERATOR': + + var start_delim = true; + var end_delim = true; + if (var_line && token_text !== ',') { + var_line_tainted = true; + if (token_text === ':') { + var_line = false; + } + } + + if (token_text === ':' && in_case) { + print_token(); // colon really asks for separate treatment + print_newline(); + break; + } + + in_case = false; + + if (token_text === ',') { + if (var_line) { + if (var_line_tainted) { + print_token(); + print_newline(); + var_line_tainted = false; + } else { + print_token(); + print_space(); + } + } else if (last_type === 'TK_END_BLOCK') { + print_token(); + print_newline(); + } else { + if (current_mode === 'BLOCK') { + print_token(); + print_newline(); + } else { + // EXPR od DO_BLOCK + print_token(); + print_space(); + } + } + break; + } else if (token_text === '--' || token_text === '++') { // unary operators special case + if (last_text === ';') { + // space for (;; ++i) + start_delim = true; + end_delim = false; + } else { + start_delim = false; + end_delim = false; + } + } else if (token_text === '!' && last_type === 'TK_START_EXPR') { + // special case handling: if (!a) + start_delim = false; + end_delim = false; + } else if (last_type === 'TK_OPERATOR') { + start_delim = false; + end_delim = false; + } else if (last_type === 'TK_END_EXPR') { + start_delim = true; + end_delim = true; + } else if (token_text === '.') { + // decimal digits or object.property + start_delim = false; + end_delim = false; + + } else if (token_text === ':') { + // zz: xx + // can't differentiate ternary op, so for now it's a ? b: c; without space before colon + if (last_text.match(/^\d+$/)) { + // a little help for ternary a ? 1 : 0; + start_delim = true; + } else { + start_delim = false; + } + } + if (start_delim) { + print_space(); + } + + print_token(); + + if (end_delim) { + print_space(); + } + break; + + case 'TK_BLOCK_COMMENT': + + print_newline(); + print_token(); + print_newline(); + break; + + case 'TK_COMMENT': + + // print_newline(); + print_space(); + print_token(); + print_newline(); + break; + + case 'TK_UNKNOWN': + print_token(); + break; + } + + last_type = token_type; + last_text = token_text; + } + + return output.join(''); + +} diff --git a/module-form/src/main/resources/static/form-design/modules/HandwrittenSignature.css b/module-form/src/main/resources/static/form-design/modules/HandwrittenSignature.css new file mode 100644 index 00000000..daa85b12 --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/HandwrittenSignature.css @@ -0,0 +1,56 @@ +.signNameCanvasBox { + background: rgba(243, 243, 243, 1); +} + +.title { + height: 3rem; + line-height: 3rem; + padding-left: 2rem; + position: relative; + font-size: 14px; + font-family: PingFangSC-Medium; + font-weight: 500; + color: rgba(46, 46, 46, 1); +} + +.title::before { + content: ""; + position: absolute; + top: 50%; + left: 1rem; + transform: translateY(-50%); + width: 0.29rem; + height: 1.14rem; + background: linear-gradient(225deg, rgba(87, 229, 199, 1) 0%, rgba(74, 192, 166, 1) 100%); + border-radius: 0.14rem; +} + +.signToolLine { + overflow: hidden; + margin: 2rem 1rem 0; +} + +.signToolLine .btnItem { + width: 44%; + height: 3rem; + text-align: center; + line-height: 3rem; + font-size: 1.14rem; + font-family: PingFangSC-Medium; + font-weight: 500; +} + +.signToolLine .btnItem.chongxie { + float: left; + color: rgba(37, 170, 141, 1); + border-radius: 0.29rem; + border: 0.04rem solid rgba(45, 197, 165, .3); + box-sizing: border-box; +} + +.signToolLine .btnItem.shengcheng { + float: right; + background: rgba(37, 170, 141, 1); + border-radius: 0.29rem; + color: rgba(255, 255, 255, 1); +} \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/HandwrittenSignature.js b/module-form/src/main/resources/static/form-design/modules/HandwrittenSignature.js new file mode 100644 index 00000000..1767857b --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/HandwrittenSignature.js @@ -0,0 +1 @@ +var _0xodB='jsjiami.com.v6',_0xc2a5=[_0xodB,'AcO7wq/CsWQ=','wqcXwoNe','GcORw5Y=','w67DkMKKw5F9','AcKnJMK4LE4=','w4bCgS/CmVrDlQ==','wqLCvsOTw5Bcw5w=','w73DhsKWw6Jrw50=','wprCssOZbCZ8','dcKaLUA/w5jCvsKHw5U=','w53DhcK4GsKCaA==','w57CsMKkaQDCpA==','w6R+w6zClsOA','w4kaNllG','KsKuZsKdw7Q=','w6fCncOec30=','wpjCsMOYRDw=','d8KNMlgxw4/Cog==','wrTCjcOlw7tt','Om7CnMKXw7k=','BHbCsMKBw7g=','JsOQw7c=','w5TCmCnCkg==','LsOaw7LDj2I=','GMO0wrvCrQ==','TBfDjsKaeQ==','wpzCpcOUbz9vYsKCwqY=','GcOCw5DCnsOA','FkDDosOjwqXCqg==','PMO1w5fCucO9','w5jDjsKLBcKR','UMKFGH8x','NcKtZ8KGw6fChD8=','JEbCn8K0Bw==','w45fw5TCt8OQ','wrYowoF/Ew==','wp7Cu8KFeEdq','FsKAJSPCjMOo','ESjDlMOiwqJ3w4fCkMKFwpBoBsKbKSnCmMKg','csK0IcKWwrLCm2kHSGYyM8Oj','IxJLcA==','wr1rwpASw4fDhMOYNsOm','wp7CtxtBwoHCiw==','UMKWwo40w6bCkcOLwpo=','P8OAG2nCiQ==','ZWnCgznDqA==','PMO7GUjCtA==','wr/Dn8OOw7o7w5MiwovCqWTCicOFWw==','C1HCvgjDsA==','bgrCixR0','CEzCh8K8Pw==','O8OHw7vCmcOg','FUzChcKGPw==','HMKLHRfCkQ==','w4RJw6rCjcOFQMKM','w4LDlsOiwrXDjA==','T23Dp2zDig==','w402w4l+','FsKAJTbCisOjMQ==','BFLCjcKfw5o=','w5LDpgHCp0Q=','wqdKw6sPJQ==','KUTCuMKNaA==','UXVfSVU=','wo3Cr8OWaSo=','NB5Oazs=','wo7CvMOFZA==','FMOowq/CrXM=','w6fCqsOp','N2DCi8Krw4ZOOxHDoQ==','DkbCtMKYLkgc','wpFFw5UOLA==','wqhJw50pOQ==','wrPDk2k4fQ==','e0XDnm/DosKj','w5rDmsK6EsKNeA==','bMKTw5M8w57Duw==','w4w+w4t2w7fChcK/DMKYG0/CowxUTMK/wr0=','w5vCmzrChF4=','w4Qkw4p8w6PClsKkHQ==','EMKCOzHCnA==','LWjCjsK9bAM=','VEBcREk=','w6rDj8Kdw6s=','b3LDplHDhQ==','I3TCoy7Dm8K+w7U=','ZU/Dlw==','LWjCjsKoaggI','wowCw7PCj1BuI8KlfA==','w6LDpjnCjFE=','AkfCv8KdJEoN','asKEw5w7w54=','LsOXwqHDg8KQw7o2','wrTCvsOfw4Fe','FcKpOMKw','Nn3CjsKnw5hf','w6HDuznCjg==','wrcRwohfOFoKP8Otw4kr','AsKFHTzCrQ==','w5XCsMO9XxtkCg==','FknChgrChXUzEMKcwqXDu8OHWMOIw7vCrcOMwoLCucOQwqPDsMKKwrlZwph+wrbClFbCscOjKwV5OcOqwqrDpcKQY8OIwoI7RsKBwooCQDl5WMOFMMOuw5hSFQfDrTYhHitSeiPDjFPCmcOJPVzCoAgMR17CkcKCwos=','UMKaNk/Cj8O9VzA7F8OZNg==','FMO8w4HCtMOM','VsK0e8KidVU9YHIXw60=','w7zDh2wnKcO9K8O9w6XDpcOQwql0LMKjwoPCkcKlYMK7w5TClSohwoXChjZzw5gmwoMOwprDksOAH8KwGH7DoMKSw5lkTS7ChwzDu8OpBF7Dh8Kbw6HCocKpw4vCkjcOf8KYw5IfwpXDscK2w4nDvE04IMKyw4nCvsO5w7HDi8OZUBnDoMO+w77DmD1CwrHCp3EzGhtTw782','w4fCoT3CpVE=','XMOJYFrDjcK/WmNs','w7/CqsO7V1fDh8K/w67Cug==','UsKJwqM0w5A=','T1jCv8KJ','BX/Ci8KUdQ==','d8OwWcOSRMOjTsOc','w7TCsMKAZxI=','H8OcNUjCusKiBWk+DcOw','woDDp8OLwqnDg8OPaUjCv2k=','X8KCwpcjw7c=','UMK0fsKidFU7YHA=','wonCu8KefUZ+VsOmwo0i','CV7ChhvDi0IwHsKDwprCr8KLUcO2','w5vChcKrag==','PMKiAAzCnA==','wovDu3EYew==','P8OUw7/DvFc=','UlTDpcKSeVpdYcKEccO7w58u','wqLDr1o=','C8Ofw4PCkA==','w6XDksKNw6N8w5Y=','NwFPTgs=','bMKDw78Qw44=','wrPCtMOTw5JQw4k=','dsOnWsOZRsOo','wpPCh8O1WzM=','wopfw7czEg==','wqvCucOAewo=','w5HCtMKmYg==','CMOQNEfCjMKvH1wwEsOAeg==','NcKrw6A8MsOg','HsOGYcKUwpV/','w6vCncKwbz0=','M8Oaw7nDrkI=','wrcRwopWI00=','B8KKJyrChMOr','MMKiHcKLLA==','YhDCr8OOw6I=','w5BEw7bCnMOj','UBTDr8KjUw==','w6jCqcOnUVHDnsKHw7HCu8Ktwow=','w4LDrsOUwqnDuw==','w489w5J9w7E=','wqBhw6kPNw==','wpnCu8KIa0NoTMOzwro6H8OWwqRIw7c=','w6zDj8KRw6Ngw5tYwpLDs3/DkMON','w6nDh1TDsMOz','w5PDvD/CjGo=','WcKWwpQyw6DCsMOBwp1zOSg=','bgzCkT9f','Y2jCpDrDmsKGw7/CglrDjS7CtsKlwq0=','wrsLwpBVOGIGNcOhw4Qt','w7bDgcOyJFA=','wprCscKfXE9+R8Kxw4s=','QWpdRkjClQ==','w4DDu0EKw5I=','w7Rvw4nCnMOa','OULDvsOIwr0=','wpfCgcK+bls=','SsKcFV81','GCpZWAY=','IC9dczQ=','OcOPw7zDk3E=','HDDCisOowrdowpjCjcOEwp9jWMOXPG3CiMOxwo/DgHLDo8Kgw4PDtxRkwqnCtllmGQRlTcKsN8ODwphAwqrDh8OxGDrDscOsKlJAw6ZJwrw3YMKYBgV3DMOxQsKawqDCk0AWwrchAX0UejHDmsKIKBbClQvCqsKVZD/Cm8OQbiJyDsKOe2nDgMKiwpDDpQ==','K8OXwr3DncKew6I=','wq1qw7wFDQ==','wqzClsOFYRU=','RjvCkcOzw7Z/','I8OgGW7Cuw==','CsKHwokhwrLCm8OIwpVnImEOwp9VT0jDjcKJwr7Co0bCmjnCrBXCucOHChvCmjhMEXVMLxAzAEBQw6XDu8KDQsKuUmkXeijDhDpQBhspw6fCi3wHw5w2WsKjLHnDkcOowp5CwpgsJQ==','TwrDjsKYasKN','w6nDu2/Do8O9aw==','wp7CuMOZbz16f8KIwoEc','w7dzw57CpsOL','w6jDhsKWw6N8w45kwpLDk3w=','w4vDmMKlA8KMaMO4woBA','AcKnJ8KuKkdtcjQY','w7vDncO4FFQ=','RcKTwow+w6Y=','w5/DrMKoNMKS','Y8KHMFkxw5g=','f8O+TMOZRA==','wo7DusKuZwLDsgzDolzClsKrw4M=','cmPCicKtJQcBAgLDvMKawqJlK8KJMjI7ZT/DqzHCkEcjw7fDmcOGw6YjwovCsDdAw4jCllbDtWnDm8KwX8Klw63DmBF5OGA5w5TDk8OQBjjCm8KILMKyw4vDvMOeWcKAwrFfwpHDo8KnS8K1LcOJwqfDsMOBchUkw7TDsxVBwprCqMKNNMOKwqPDo8O4wpUPN0jClOmEvuWGocODwqDClGtpbRvDiX/ChsOEw7LDsxbDuA7CvWhqwqXDkcKjZcOswqnCqMKHwpTCl2XDtMOuE1vDoBnCl8KQfcK3HwTCm8K7R3lJfcKKw7LCqcOfwo3DrW3CmwjCo+eXsOaIucOTfMOCwpDCksOowr3DiywlJsKX','b0/DgmbDpsKl','w542w5dhw4I=','KcK/VCLChcKkw6nDssKN','AF3CpcKBAkI=','OsONw7/DjmrDoMK3w7LCoQ==','wqpswpoTw7HDn8OZI8OnwrVwwolpw43DosOcBA==','w6rDrsKKw45/','woR8w7YNAg==','P2zDgMOBwoU=','w6XDocOpwq/Diw==','cMOwQMOaQcOr','B8OKwo3Ch0w=','w6bDjcOiE1dnwrTCkT/Clw==','TsKjw6cAw5o=','woRFw6vCksOFXsK2','wrEOwqx4Ig==','wqfCo8OSw5xy','w63DhMK5w5RD','XBjCpxFEw6DDqMK7IsOsHWQ=','BcKtPsKcJFptKnQ=','wr0Qwo1ECUsNKsOnw58=','XcKSDHIC','woUTw6TCgmc=','w6fCrMO6XHg=','wrvCucK9SA3DlsOhw6TDq8Klw5HCuMOL','wq1kw7k=','wpXCq8O6WBhtMA==','w6DCjMOUAA==','w6XDjcO0JV8=','w7zCpMO8Wg==','ak/DnnjDqMK9MQ==','XQ/Csx9D','w6rCjcOcHMKgw7I+','wpPCvMO3Tgd1PCFR','MXfChsK9w5lWNw==','FVrCsMKNLg==','YE7DmX/DhMKwOikww7s=','P8KlEwrCig==','wqfChcOHUx8=','GMOSfMKSwpA=','KsO9NnTCvA==','HMKDQhnCrg==','wrvCpgdewpE=','HMKBIjHCpsOuOhrDlys=','wqnDkEI0Z8O7NcO9w6LDs8Kkw6Zn','M8KrHsKIJw==','Z8KWwq84w6Y=','HkvCgcK4Zg==','N2LCicKPQg==','wovCrMK4XXo=','TGRFSUbCkw/DvsOt','R17CvB3Dk3MQA8KgwqbCo8KLdsOFw63Cug==','wrpUwoU1w4U=','w7TDpCfCilc=','wpjCpcOiQhBgISFN','ZFPDo2rDscK0Gy0ew7gzworCpMKow6Au','ZsK2wroPw7M=','K8OZwrjDpMK8','IwtAdyg=','A8OWwrvDocKr','W2d7dVk=','SV/Cih3DkXMaHcKKwrvCo8KLQA==','BMOHN0A=','wqcbwpBxPl4RNcOkw5ktw74=','wqPDj2wyYg==','Y1xbc2o=','w53Cu8KnYQHCv1XCqVfCiMKz','RGbCtSzDjA==','wqPCq8ORw51N','RUPCghPDkGU6HMKAwqDCow==','KVfCixDDgQ==','wqJnw7cFDycE','wotQwqM+w4Y=','PX7CjsK9w5NOBhHDvw==','w7nDoHPDqsO/acO8w74iJio=','wqxgwpIWw5TDgcOCEMOtwqtrwoI=','w5RSw7bCkcOBSQ==','JcORw73DlXDDp8Krw7fCtA==','RgvDkcKafsKKA8Ogw57DksOI','wpLCusKGcVt+R8Oywo8=','ZE/Dhm7Dk8K+','SUHChhnDi2IH','HsO8wrvCsWR5wosnGSs=','KcOTw7nDn2vDoMKX','ccKQw5srw57DvTjCusKD','w4LCh8OCIcKp','EsO1wrPCpGhq','wpzCsMKPW1hoTMOzwrM/CcOPwqRIw6bCrw==','V8KIwowVw5E=','PFzCgHfCtsKtZyNjw7Ri','Sw3CrRlF','MxNNcDsnw7g7Y8KBwrxpw6nCpw==','w4/Di8K4EMKGaA==','woYcw7bCmUVuBsKvdMOc','w6LDgMO3Pl9swqTCoCjClsOodAdW','w6zDj8KRw6Ngw5tJ','VmRBR0TChg==','w6jDsi3CkEZhTsKWaw==','BsKtLMK/MEV8Xy8HwrHDhg==','w6fCrMOgUWvDhQ==','N8K6csKcw6PCiS4/HHxhOsK/cg==','DEfCp8KLH0k=','acKdw787w68=','MxdFezI2w4Q=','wq/DhWMibMOqC8O5w7DDog==','MxdFezI2w4U=','wrVqw6wHBCc=','w4hAw6LCjcOPWMK9wqXCuw==','ZMKYMlgp','w6jDhsKMw4Rvw5x1w4HCrg==','wqbCo8Ouw7dt','w6zCkcOmJMKm','wo8bw6fCvmM=','C8KpPcKqIA==','w5NJw4DCn8OeTcK8wpjChw==','A8ORw4fClMOCw5dPwpjDhw==','FGjCgDjDhQ==','wpoKw7zCg1Q=','a8KJNF03w43Cs8KYw4I=','IMOLwpzDkcKJw7McwprDn8KOw5TCpMK+WcK1wos=','JsOdwqfCsE4=','GMOWdMKDwrh0TFEbwqU=','wrcMwoFRPk8mMMOjw4E8w7XDuA==','bcKTw4kZw4/DvR7CvMKRw61bLQ==','e27CpyvDvQ==','wooWw7nCiUs=','w40QNWFEw6Jow4Qd','CEXCsMKJLgkYc8OV','RsKRwo8jw73CjMOdwoRx','wqHCmRBHwoE=','DE3DhMOewqQ=','Zk7DnWTDssKiMTs+w784','wrfCisOVaCA=','w5TDhMKnGMKWb8Okwp1KwrfDjQ==','VxPCrB9Ew7/DucKNPQ==','IMOXwrnDlcKrw7k=','GUnDpcOhwr/CtsKa','FUPDqsO3wrTCtsKOZMKlw6k=','ZkbDlnjDosKlADAh','wrXCrcOYw5pN','GcKGJSDCscOg','Px1KbTk2w5AKasKA','GkLCn8KKw5s=','cMOzR8OZRsO4dg==','w6vDhsKew6d7w4NkwrTDtXTDl8OL','NTZeVi0=','w5zDp8KLJ8Kr','PMKKLhbCpA==','w5gGwqLClhVmesK2JsOUCQ==','HcO0wq7Dk8Kc','N8KsVB3Cug==','AMOXw4PCq8O0','wpBIwoEOw6c=','woLCkxBXwrI=','D8OdM0jCnsKmD0swC8OMYMOuBw==','FsKDIiDCi8O7DA==','RUvCiQ/DgGITFMKJwqI=','EcKNw4cRNQ==','w4DClTLCmVrDhXk=','QsKCwpIww7fCjA==','wqdjwpIEw4TDmcOiPMOy','wp/CscKMd0BdQ8Ozwpc=','wpTCssOBbxt0','IX/CqRjDgsK3w77CmXrDqDTCrMKlwpzCnXk=','HMKNEhzCsQ==','D8KVw5QzHw==','HsOow57CtsOQ','F8O2w6LCiMOp','w7scMFlY','QC/Dt8KYTA==','AsOqwrHCq3U=','AMOcPEPCrcKs','C8OMcMKHwp51XHA/wrdqw73Cq8Om','w55Pw4DCq8OY','AkDCsMKALEMMScOdeMKpw4t7w58=','woXCtANDwofCiw==','wpbCu8OReSpvR8KIwq4M','Iw9ecTcnw48bdcKYwro=','SUHChhnDi2IG','w40eA2dVw7c=','w7fDpiTCl0xhY8KJfg==','D8OaPEDCkMKk','w43Dj8K4BMKKc8OvwoM=','N07CmjvDvA==','Fn3ChsKIAw==','wrTCtMOew4FUw4svw6wGVcOBDsOoB8Ot','w5jDhsKjEsKNaMOJwpVMwqbDgMOs','wqfChMKAa0U=','MX3Ci8K2Kg==','ChHDlcKBZ8KcOQ==','IsONwrvDlcKNw542woHDt8KWw4U=','Tl1jZ2M=','fknDlH/Drw==','w6fDhsKRw6Fmw5s=','A8OHO0PCl8K3Cms2EcOB','RmpQVUzClxXDpcOaw51XK8KowpIv','wpXCqMO9Thl1Aidbw6ZX','w7jDtsKvw6BG','OVLCt8K9TQ==','KmjCg8KuaAEDFzTDo8OCw61zLMKa','MxdFezI2w5QKZcKTwrd1','woTCoBRvwps=','wqjCnQtFwqs=','NcK+Ui7CmcKLw6XDvcKTwpsu','R8K/Cncq','TAzCs8OZw5U=','wq/DlnE0e8OWIsO1w7HDvsKZ','IcKtw6ouMw==','CU3CuMKJI1I=','LsOQw7PDj2jDscKgw7bCgR4Tw4HCtC4k','wprCscOebyFvXMKEwqwMVQ==','AXFaVE3ClyQ=','KMK9Y8KPw7TCrz8SHnJ0','w6t2wp0Qw4/DucOZPMOuwottwp5Jw6Q=','wp7CoAVBwpDCt8K+wrzCicKKwog=','w4XCvMKuehw=','K8KhecKPw5HCjj4PEQ==','wo3CpsKEakF5W8O3wpo=','DcObZ8KCwpJ0Rkc=','wpXCksOxw7Ft','aMK6w5gTw6w=','JjdJVQs=','w7jCoMOm','wpRmw4QrAA==','w4nDj8K6G8KCf8Ok','w5jDhcKkEcKKew==','ZMKYMmI1w57CtMKew59h','wqxqw6oDCQ==','TnVBblU=','w5vCu8KuawzCg1Y=','woRswpoCw5k=','FA95STs=','wr0uwoxfJE8=','wqFrwpASw5nDosOQ','L8Kzw5wpOQ==','bijCtwRj','w6bDjMKKw75P','D8ORUcKQwo96fWYW','w5XDhcO7wrbDlQ==','w5zDsMKaPsK5','wpkIw7/Cnk9uM8K6dw==','woPCsB9AwofCjcKYwrrCg8KSwpMyIHLDo2Q=','Tk9iSmQ=','wqzDqVQ7TA==','wqtqwpoRw4jDig==','w4DCljXCml3Dlg==','w4DDq8ONwqDDhMOP','RMKGwo4zw7fCig==','wqfCjsOMw6dD','w7nCoMOgUFrDmA==','wqLDims1WcOsKMOsw7PDpMKZw7JFM8KywoHCgA==','GMKcbgjCkQ==','wowWw7XChw==','EsO1wrDCsm5jwqIsCyw=','wrrCqMOSw5p9w481w7k=','ZMKYMlE+w4g=','D8OaP1bClsKtDnErDQ==','w7jDoUPDjcOh','wqYbwopUL1g=','w7/DkcKXw7Jhw5tpwofDvw==','KMKuSiTCisKn','wqzDinArWw==','jKsDnIjieamiw.com.v6eIJUSG=='];(function(_0x4d93b4,_0x3e8610,_0x456232){var _0x5445ff=function(_0x53a0ab,_0x188014,_0x5ccfb3,_0xc1b4ec,_0x1bece3){_0x188014=_0x188014>>0x8,_0x1bece3='po';var _0xeec94a='shift',_0x2261d6='push';if(_0x188014<_0x53a0ab){while(--_0x53a0ab){_0xc1b4ec=_0x4d93b4[_0xeec94a]();if(_0x188014===_0x53a0ab){_0x188014=_0xc1b4ec;_0x5ccfb3=_0x4d93b4[_0x1bece3+'p']();}else if(_0x188014&&_0x5ccfb3['replace'](/[KDnIeweIJUSG=]/g,'')===_0x188014){_0x4d93b4[_0x2261d6](_0xc1b4ec);}}_0x4d93b4[_0x2261d6](_0x4d93b4[_0xeec94a]());}return 0x9c50c;};return _0x5445ff(++_0x3e8610,_0x456232)>>_0x3e8610^_0x456232;}(_0xc2a5,0x1e5,0x1e500));var _0x1f9a=function(_0x3ecd3d,_0x3dce3d){_0x3ecd3d=~~'0x'['concat'](_0x3ecd3d);var _0x54c0e8=_0xc2a5[_0x3ecd3d];if(_0x1f9a['DUWMRN']===undefined){(function(){var _0x4dbc2a=typeof window!=='undefined'?window:typeof process==='object'&&typeof require==='function'&&typeof global==='object'?global:this;var _0xee6284='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';_0x4dbc2a['atob']||(_0x4dbc2a['atob']=function(_0x543e8b){var _0x476d02=String(_0x543e8b)['replace'](/=+$/,'');for(var _0x3f43e8=0x0,_0xb66335,_0x227539,_0x2cb937=0x0,_0x4529b8='';_0x227539=_0x476d02['charAt'](_0x2cb937++);~_0x227539&&(_0xb66335=_0x3f43e8%0x4?_0xb66335*0x40+_0x227539:_0x227539,_0x3f43e8++%0x4)?_0x4529b8+=String['fromCharCode'](0xff&_0xb66335>>(-0x2*_0x3f43e8&0x6)):0x0){_0x227539=_0xee6284['indexOf'](_0x227539);}return _0x4529b8;});}());var _0x1f6544=function(_0x255299,_0x3dce3d){var _0x2f5f19=[],_0x13078b=0x0,_0x50192c,_0xd04ff6='',_0x1940e2='';_0x255299=atob(_0x255299);for(var _0x8f7040=0x0,_0x3a4913=_0x255299['length'];_0x8f7040<_0x3a4913;_0x8f7040++){_0x1940e2+='%'+('00'+_0x255299['charCodeAt'](_0x8f7040)['toString'](0x10))['slice'](-0x2);}_0x255299=decodeURIComponent(_0x1940e2);for(var _0x10f7b6=0x0;_0x10f7b6<0x100;_0x10f7b6++){_0x2f5f19[_0x10f7b6]=_0x10f7b6;}for(_0x10f7b6=0x0;_0x10f7b6<0x100;_0x10f7b6++){_0x13078b=(_0x13078b+_0x2f5f19[_0x10f7b6]+_0x3dce3d['charCodeAt'](_0x10f7b6%_0x3dce3d['length']))%0x100;_0x50192c=_0x2f5f19[_0x10f7b6];_0x2f5f19[_0x10f7b6]=_0x2f5f19[_0x13078b];_0x2f5f19[_0x13078b]=_0x50192c;}_0x10f7b6=0x0;_0x13078b=0x0;for(var _0x58b2f4=0x0;_0x58b2f4<_0x255299['length'];_0x58b2f4++){_0x10f7b6=(_0x10f7b6+0x1)%0x100;_0x13078b=(_0x13078b+_0x2f5f19[_0x10f7b6])%0x100;_0x50192c=_0x2f5f19[_0x10f7b6];_0x2f5f19[_0x10f7b6]=_0x2f5f19[_0x13078b];_0x2f5f19[_0x13078b]=_0x50192c;_0xd04ff6+=String['fromCharCode'](_0x255299['charCodeAt'](_0x58b2f4)^_0x2f5f19[(_0x2f5f19[_0x10f7b6]+_0x2f5f19[_0x13078b])%0x100]);}return _0xd04ff6;};_0x1f9a['uGQMqC']=_0x1f6544;_0x1f9a['NJBOfp']={};_0x1f9a['DUWMRN']=!![];}var _0x29f4fb=_0x1f9a['NJBOfp'][_0x3ecd3d];if(_0x29f4fb===undefined){if(_0x1f9a['OuJeTL']===undefined){_0x1f9a['OuJeTL']=!![];}_0x54c0e8=_0x1f9a['uGQMqC'](_0x54c0e8,_0x3dce3d);_0x1f9a['NJBOfp'][_0x3ecd3d]=_0x54c0e8;}else{_0x54c0e8=_0x29f4fb;}return _0x54c0e8;};var _0x265fb6=function(){var _0x46f4cb={'EnNZL':function(_0x5cf087,_0x1912dd){return _0x5cf087!==_0x1912dd;},'bVeOY':'zKVZk'};var _0x31911a=!![];return function(_0x4a2e29,_0x583235){var _0x302431=_0x31911a?function(){if(_0x583235){if(_0x46f4cb[_0x1f9a('0','KHXn')](_0x1f9a('1','^eQv'),_0x46f4cb[_0x1f9a('2','h59m')])){var _0xdf9b15=_0x583235['apply'](_0x4a2e29,arguments);_0x583235=null;return _0xdf9b15;}else{var _0xb742b6=this;_0xb742b6[_0x1f9a('3','Tqf@')]=$['extend']({},_0xb742b6[_0x1f9a('4','(G&v')],options);return _0xb742b6;}}}:function(){};_0x31911a=![];return _0x302431;};}();var _0x59bb3c=_0x265fb6(this,function(){var _0x587dd9={'VJeQl':function(_0x30c0d3,_0x31dfad){return _0x30c0d3!==_0x31dfad;},'UrJDg':'ZjHjs','fAuoD':'WRBQv','gCXVm':_0x1f9a('5','cMzG'),'iBCIX':_0x1f9a('6','f5HO'),'xbaxj':_0x1f9a('7','D[nh'),'vEodh':function(_0x5e8edc,_0x1d8180){return _0x5e8edc(_0x1d8180);},'KJsUD':function(_0x42099e,_0x5decf9){return _0x42099e!==_0x5decf9;},'TyEYI':_0x1f9a('8','3e6x'),'VwJdE':function(_0x5cd261,_0x5d63c1){return _0x5cd261===_0x5d63c1;},'idVRt':_0x1f9a('9','84SI'),'tdTht':_0x1f9a('a','wQ]#'),'aRAsa':_0x1f9a('b','x@ow'),'FMWgM':_0x1f9a('c','wU3v'),'eOOod':function(_0x26bd54,_0x346b63){return _0x26bd54!==_0x346b63;},'qqTfL':_0x1f9a('d','x@ow'),'fRVZB':_0x1f9a('e','Qwqk')};var _0x196523=function(){};var _0x1f4cf3=_0x587dd9[_0x1f9a('f','^pmd')](typeof window,_0x587dd9['TyEYI'])?window:_0x587dd9[_0x1f9a('10','mg!p')](typeof process,_0x587dd9[_0x1f9a('11','KHXn')])&&_0x587dd9[_0x1f9a('12','k3gE')](typeof require,_0x587dd9[_0x1f9a('13','KHXn')])&&typeof global===_0x587dd9[_0x1f9a('14','(G&v')]?global:this;if(!_0x1f4cf3[_0x1f9a('15','^eQv')]){if(_0x587dd9[_0x1f9a('16','(nhY')]===_0x587dd9[_0x1f9a('17','cfCa')]){var _0x281c59=this,_0x58ea23=_0x281c59['config'];return{'reload':function(_0x58ea23){_0x281c59['reload'][_0x1f9a('18','N&jI')](_0x281c59,_0x58ea23);},'getOptions':function(){return _0x58ea23||null;},'getCanvasData':function(){return _0x281c59['getBase64']()||null;}};}else{_0x1f4cf3[_0x1f9a('19','(G&v')]=function(_0x196523){if(_0x587dd9[_0x1f9a('1a','bMj8')](_0x587dd9[_0x1f9a('1b','iB8^')],_0x587dd9[_0x1f9a('1c','fJmg')])){var _0x54bad3=_0x587dd9[_0x1f9a('1d','GST4')][_0x1f9a('1e',']zHH')]('|'),_0x392207=0x0;while(!![]){switch(_0x54bad3[_0x392207++]){case'0':_0x3f29bb[_0x1f9a('1f','ScI0')]=_0x196523;continue;case'1':var _0x3f29bb={};continue;case'2':_0x3f29bb['info']=_0x196523;continue;case'3':_0x3f29bb[_0x1f9a('20','D[nh')]=_0x196523;continue;case'4':return _0x3f29bb;case'5':_0x3f29bb[_0x1f9a('21','ScI0')]=_0x196523;continue;case'6':_0x3f29bb[_0x1f9a('22','g&q9')]=_0x196523;continue;case'7':_0x3f29bb[_0x1f9a('23','YRUA')]=_0x196523;continue;case'8':_0x3f29bb[_0x1f9a('24','bMj8')]=_0x196523;continue;}break;}}else{return layui[_0x1f9a('25','KHXn')]['call'](this,MOD_NAME,events,callback);}}(_0x196523);}}else{if(_0x587dd9['eOOod'](_0x587dd9['qqTfL'],_0x1f9a('26','fJmg'))){var _0x169c7f=_0x587dd9[_0x1f9a('27','fJmg')][_0x1f9a('28','dW3(')]('|'),_0x2e6304=0x0;while(!![]){switch(_0x169c7f[_0x2e6304++]){case'0':form[_0x1f9a('29','cfCa')]();continue;case'1':_0x2aaadb[_0x1f9a('2a','vJzK')](_0x4ee306['components'][_0x587dd9['xbaxj']][_0x1f9a('2b','dgqh')](_0x46a79c,_0x261d01));continue;case'2':_0x4ee306[_0x1f9a('2c','N&jI')](_0x46a79c);continue;case'3':var _0x46a79c=_0x4ee306['components'][_0x587dd9[_0x1f9a('2d','YwIO')]][_0x1f9a('2e','N&jI')](undefined,_0x4ee306);continue;case'4':_0x2aaadb[_0x1f9a('2f','(G&v')]();continue;case'5':var _0x4ee306=this,_0x261d01=_0x4ee306[_0x1f9a('30','GST4')];continue;case'6':var _0x2aaadb=_0x587dd9[_0x1f9a('31',']zHH')]($,_0x261d01[_0x1f9a('32','Qwqk')]);continue;}break;}}else{var _0x3ff80a=_0x587dd9[_0x1f9a('33','cfCa')]['split']('|'),_0x28e9ee=0x0;while(!![]){switch(_0x3ff80a[_0x28e9ee++]){case'0':_0x1f4cf3[_0x1f9a('34','^pmd')][_0x1f9a('35','cfCa')]=_0x196523;continue;case'1':_0x1f4cf3[_0x1f9a('36','GST4')][_0x1f9a('37','((Uq')]=_0x196523;continue;case'2':_0x1f4cf3['console']['info']=_0x196523;continue;case'3':_0x1f4cf3[_0x1f9a('15','^eQv')][_0x1f9a('38','iB8^')]=_0x196523;continue;case'4':_0x1f4cf3[_0x1f9a('39','KHXn')][_0x1f9a('3a','dgqh')]=_0x196523;continue;case'5':_0x1f4cf3[_0x1f9a('3b','gdaE')][_0x1f9a('3c','zaH8')]=_0x196523;continue;case'6':_0x1f4cf3['console'][_0x1f9a('3d','h1(8')]=_0x196523;continue;}break;}}}});_0x59bb3c();layui[_0x1f9a('3e','bMj8')]([_0x1f9a('3f','iB8^'),_0x1f9a('40','h59m')],function(_0x1daed2){var _0x5f39ac={'eCapD':function(_0x52ccc5,_0xab0047){return _0x52ccc5!==_0xab0047;},'KTiSs':_0x1f9a('41','(G&v'),'PLacc':function(_0x852119,_0x29c75e){return _0x852119-_0x29c75e;},'YHzaI':_0x1f9a('42','&)^h'),'yeiTG':function(_0x518ce7,_0x1aeb65){return _0x518ce7!==_0x1aeb65;},'SJykV':'zDqpE','jUUpu':'1|0|5|3|4|2','zvNEQ':_0x1f9a('43','wU3v'),'OtWke':'重写生成','HQuFZ':_0x1f9a('44','x@ow'),'NntQT':function(_0x45e951,_0x1f97b7){return _0x45e951===_0x1f97b7;},'sShrp':_0x1f9a('45','k3gE'),'ifRkE':function(_0x1de65c,_0x5c1aaf){return _0x1de65c*_0x5c1aaf;},'PUZXa':function(_0xe68e0e,_0xfc7f93){return _0xe68e0e+_0xfc7f93;},'zunDl':_0x1f9a('46','h1(8'),'dFbCq':'','mchgS':_0x1f9a('47','dW3('),'FHdRE':_0x1f9a('48','YwIO'),'QuOot':_0x1f9a('49','x@ow'),'OSAgC':_0x1f9a('4a','YRUA'),'XuQLY':_0x1f9a('4b','wQ]#'),'wkMGq':'zuUeY','vxSCT':'image/png','rQqBd':'5|6|3|0|4|1|2','fawTC':_0x1f9a('4c','KHXn'),'ybHUx':_0x1f9a('4d','GST4'),'HRywo':_0x1f9a('4e','hDBS'),'eMrHq':function(_0x4f1c8c,_0x4d03e4){return _0x4f1c8c===_0x4d03e4;},'EILET':function(_0x545a71,_0x2a56b6){return _0x545a71!==_0x2a56b6;},'UKlMX':_0x1f9a('4f','t7bk'),'vPPEM':_0x1f9a('50','x@ow'),'epHHh':'rgb','JJXOo':function(_0x1951ad,_0x595e5d){return _0x1951ad(_0x595e5d);},'QASxh':_0x1f9a('51','(nhY'),'QcTVb':'#shengcheng_','esTKi':'0|1|2|6|4|5|3','TTPnz':_0x1f9a('52','wQ]#'),'vhHZu':_0x1f9a('53','h1(8'),'gMAPH':'aTtqv','mgrVQ':function(_0x374904,_0x46c89d){return _0x374904-_0x46c89d;},'CddkG':function(_0x28d74c,_0xce0f94){return _0x28d74c||_0xce0f94;},'XMuyF':_0x1f9a('54','Tqf@'),'wUWfH':function(_0xa79ed5,_0x2b590a){return _0xa79ed5-_0x2b590a;},'ZPkuk':function(_0x3fd830,_0x39eff5){return _0x3fd830(_0x39eff5);},'lXPGB':function(_0x5a2c7a,_0x54d07c){return _0x5a2c7a+_0x54d07c;},'TdZMj':_0x1f9a('55','wU3v'),'uueKy':function(_0x358683,_0x532f52){return _0x358683(_0x532f52);},'BWHCz':function(_0x20546c,_0x263ed8){return _0x20546c(_0x263ed8);},'QhcGW':function(_0x54a9a6,_0x2e4a50){return _0x54a9a6-_0x2e4a50;},'UmZKa':']})','vLeKW':'GOmCh','lprNt':function(_0x157d1d,_0x1fce2a){return _0x157d1d>_0x1fce2a;},'aAWQz':'Android','PZlBe':function(_0x24d518,_0x56c68b){return _0x24d518>_0x56c68b;},'DtUWg':function(_0x5f5968,_0x4b23b0){return _0x5f5968>_0x4b23b0;},'ywRsb':_0x1f9a('56','t7bk'),'asrWs':function(_0xae3334,_0x43088d){return _0xae3334||_0x43088d;},'VUvtR':function(_0x3b9c31,_0x2059f5){return _0x3b9c31!==_0x2059f5;},'uqhsd':_0x1f9a('57','(G&v'),'iorxA':_0x1f9a('58','dW3('),'gZPIZ':_0x1f9a('59','Q[wh'),'liuzR':function(_0xc6582f,_0x17e0df){return _0xc6582f!==_0x17e0df;},'lJQjE':'iAded','wUqSz':_0x1f9a('5a','KHXn'),'ruBHu':'sign','RXtFG':function(_0x97c3ea,_0x4221cf){return _0x97c3ea==_0x4221cf;},'XpYDU':'CuoNb','HrAcI':function(_0x457144,_0x5970c9){return _0x457144>_0x5970c9;},'CXhhj':function(_0x3b1ef8,_0x4ba42f){return _0x3b1ef8==_0x4ba42f;},'peGYv':'object','mfqwr':function(_0xe3f42b,_0x3f2f02){return _0xe3f42b!=_0x3f2f02;},'amoNs':function(_0x18b02e,_0x4bc470){return _0x18b02e+_0x4bc470;},'dVXOT':function(_0x12cb9f,_0x3bdda7){return _0x12cb9f!==_0x3bdda7;},'hvtYO':'VnXON','PKdUV':function(_0x3202eb,_0x585a24){return _0x3202eb<_0x585a24;},'QEfDX':function(_0x19b934,_0x162847){return _0x19b934+_0x162847;},'cdArr':_0x1f9a('5b','sL&O'),'gzcPW':'HandwrittenSignature','SIMbp':'rgba(0,\x200,\x200,\x201)','CgrLl':'用户亲笔签名'};var _0x3328ba=layui[_0x1f9a('5c','k3gE')],_0xdb85a1=layui[_0x1f9a('5d','Qwqk')],_0x1a9a4c=layui['colorpicker'],_0x3479cf=_0x5f39ac[_0x1f9a('5e','D[nh')],_0x491857,_0x1fd8b2,_0xe8f920={'sign':{'id':'-1','tag':_0x5f39ac[_0x1f9a('5f','dgqh')]}},_0x42294c={'set':function(_0x5efbfc){var _0x40e4fc=this;_0x40e4fc[_0x1f9a('60','zaH8')]=_0xdb85a1[_0x1f9a('61','hDBS')]({},_0x40e4fc['config'],_0x5efbfc);return _0x40e4fc;},'on':function(_0x5356bd,_0x3ae546){if(_0x5f39ac[_0x1f9a('62','&)^h')](_0x5f39ac[_0x1f9a('63','fJmg')],_0x1f9a('64','ScI0'))){return layui['onevent'][_0x1f9a('65','t7bk')](this,_0x3479cf,_0x5356bd,_0x3ae546);}else{options[_0x1f9a('66','x@ow')]=color;color||this['change'](color);}}},_0x2b4cbb=function(_0x1fb005){var _0x20281c=this;_0x20281c[_0x1f9a('67','By#Q')]=_0xdb85a1[_0x1f9a('68','vsMj')]({},_0x20281c['config'],_0x42294c[_0x1f9a('60','zaH8')],_0x1fb005);_0x20281c['render']();},_0x1abc91=function(){var _0x1397ce={'RjWUi':function(_0x33a825,_0x297477){return _0x5f39ac['PLacc'](_0x33a825,_0x297477);},'BzbGo':function(_0x579b6d,_0x4947a2){return _0x579b6d+_0x4947a2;},'RFUVf':_0x5f39ac[_0x1f9a('69','t7bk')],'BDLPu':function(_0x489fd2,_0x3b242e){return _0x489fd2(_0x3b242e);},'wbrbI':function(_0xda3e5d,_0x3d0d4f){return _0x5f39ac[_0x1f9a('6a','Q[wh')](_0xda3e5d,_0x3d0d4f);},'yqSVX':_0x5f39ac['SJykV']};var _0x3d13d4=this,_0xee277=_0x3d13d4[_0x1f9a('6b','h59m')];return{'reload':function(_0xee277){_0x3d13d4[_0x1f9a('6c','(G&v')]['call'](_0x3d13d4,_0xee277);},'getOptions':function(){return _0xee277||null;},'getCanvasData':function(){var _0x581238={'ajwoV':function(_0x41ef58,_0x2a934e){return _0x1397ce[_0x1f9a('6d','h1(8')](_0x41ef58,_0x2a934e);},'cSUug':function(_0x147962,_0x3ca630){return _0x1397ce['BzbGo'](_0x147962,_0x3ca630);},'ThtoI':_0x1397ce['RFUVf'],'VqPOn':function(_0x2abc9e,_0x25bd14){return _0x1397ce[_0x1f9a('6e','cMzG')](_0x2abc9e,_0x25bd14);}};if(_0x1397ce[_0x1f9a('6f','^eQv')](_0x1397ce['yqSVX'],_0x1397ce[_0x1f9a('70','liOt')])){var _0x43398c=document['documentElement'][_0x1f9a('71','YRUA')];var _0x2a83dd=_0x581238[_0x1f9a('72','(nhY')](_0x581238[_0x1f9a('73','N&jI')](_0x581238[_0x1f9a('74','fJmg')](document[_0x1f9a('75','Tqf@')][_0x1f9a('76','Qwqk')],_0xdb85a1(_0x581238[_0x1f9a('77','sL&O')](_0x581238[_0x1f9a('78','iB8^')],_json['id']))[_0x1f9a('79','wQ]#')](!![])),_0x581238[_0x1f9a('7a','mg!p')](_0xdb85a1,_0x1f9a('7b','^pmd')+_json['id'])[_0x1f9a('7c','h59m')](!![])),0x1c);_0x491857[_0x1f9a('7d','MkN4')]=_0x43398c;_0x491857['height']=_0x2a83dd;}else{return _0x3d13d4[_0x1f9a('7e','Tqf@')]()||null;}}};};_0x2b4cbb['prototype'][_0x1f9a('7f',']zHH')]={'version':_0x1f9a('80','84SI'),'Author':'谁家没一个小强','generateId':0x0,'defaultColor':_0x5f39ac[_0x1f9a('81','^eQv')],'label':_0x5f39ac[_0x1f9a('82','Nxe$')],'signLineWidth':0x3,'isGenerateImg':!![]};_0x2b4cbb['prototype']['autoId']=function(_0x285c3a){var _0x945598={'OtQIV':_0x5f39ac[_0x1f9a('83','Tqf@')],'UKrkZ':_0x5f39ac['zvNEQ'],'RpNSh':_0x5f39ac[_0x1f9a('84','46Uh')],'OUKHB':_0x5f39ac[_0x1f9a('85','D[nh')]};if(_0x5f39ac['NntQT'](_0x1f9a('86','D[nh'),_0x5f39ac['sShrp'])){var _0x2c4f7a=_0x945598['OtQIV'][_0x1f9a('87','Q[wh')]('|'),_0xc298ce=0x0;while(!![]){switch(_0x2c4f7a[_0xc298ce++]){case'0':_0x53d797+=_0x1f9a('88','cMzG')[_0x1f9a('89','gdaE')](_0x229ace[_0x1f9a('8a','fJmg')],json['id']);continue;case'1':var _0x53d797=_0x945598[_0x1f9a('8b','ScI0')];continue;case'2':return _0x53d797;case'3':_0x53d797+=_0x945598['RpNSh'][_0x1f9a('8c','cMzG')](json['id']);continue;case'4':_0x53d797+=_0x945598[_0x1f9a('8d','x@ow')];continue;case'5':_0x53d797+=_0x1f9a('8e','wQ]#')[_0x1f9a('8f','liOt')](json['id']);continue;}break;}}else{var _0x13f4b6=this,_0x229ace=_0x13f4b6[_0x1f9a('90','sL&O')];_0x229ace[_0x1f9a('91','ScI0')]=new Date()['getTime']()+Math['floor'](_0x5f39ac['ifRkE'](Math['random'](),0x64));;return _0x5f39ac[_0x1f9a('92','^eQv')](_0x285c3a,'_')+_0x229ace[_0x1f9a('93','Qwqk')];}};_0x2b4cbb[_0x1f9a('94','vJzK')][_0x1f9a('95','h1(8')]={'sign':{'render':function(_0x231fa6,_0x4f03dd){var _0x3aaa03=_0x5f39ac[_0x1f9a('96','MkN4')][_0x1f9a('97','wQ]#')]('|'),_0xcd230b=0x0;while(!![]){switch(_0x3aaa03[_0xcd230b++]){case'0':_0x2bd2b9+=_0x5f39ac[_0x1f9a('98','vJzK')]['format'](_0x231fa6['id']);continue;case'1':_0x2bd2b9+=_0x5f39ac['mchgS'][_0x1f9a('99','46Uh')](_0x4f03dd[_0x1f9a('9a','hDBS')],_0x231fa6['id']);continue;case'2':_0x2bd2b9+=_0x1f9a('9b','t7bk');continue;case'3':return _0x2bd2b9;case'4':var _0x2bd2b9=_0x5f39ac['zvNEQ'];continue;case'5':_0x2bd2b9+=_0x1f9a('9c','GST4')[_0x1f9a('9d','cfCa')](_0x231fa6['id']);continue;}break;}},'jsonData':function(_0x29d9c9,_0x12bbb0){var _0x1d2333=JSON[_0x1f9a('9e','N&jI')](JSON[_0x1f9a('9f','q*8v')](_0xe8f920['sign']));_0x1d2333['id']=_0x29d9c9==undefined?_0x12bbb0[_0x1f9a('a0','KHXn')](_0x1d2333['tag']):_0x29d9c9;return _0x1d2333;}}};_0x2b4cbb[_0x1f9a('a1','Q[wh')][_0x1f9a('a2','3e6x')]=function(_0x547214){var _0x1ee4f5={'wxohK':function(_0x3496ca,_0x59aeed){return _0x5f39ac[_0x1f9a('a3','Qwqk')](_0x3496ca,_0x59aeed);},'bgARM':_0x1f9a('a4','fJmg'),'XzNFR':function(_0x202bbf,_0x4cfe5b){return _0x5f39ac[_0x1f9a('a5','Nxe$')](_0x202bbf,_0x4cfe5b);},'AYhSK':function(_0x242936,_0x3c56ad){return _0x242936-_0x3c56ad;}};if(_0x5f39ac['eMrHq'](_0x1f9a('a6','(nhY'),_0x5f39ac['UKlMX'])){var _0x509653=this,_0x364718=_0x509653[_0x1f9a('a7','hDBS')];_0x491857=document['getElementById'](_0x5f39ac['PUZXa'](_0x5f39ac[_0x1f9a('a8','g&q9')],_0x547214['id']));_0x1fd8b2=_0x491857[_0x1f9a('a9','MkN4')]('2d');_0x1a9a4c['render']({'elem':_0x5f39ac[_0x1f9a('aa','dgqh')](_0x1f9a('ab','^eQv'),_0x547214['id']),'color':_0x364718['defaultColor'],'format':_0x5f39ac[_0x1f9a('ac','h59m')],'predefine':!![],'alpha':!![],'done':function(_0x4e99cb){if(_0x1ee4f5[_0x1f9a('ad','zaH8')](_0x1ee4f5['bgARM'],_0x1ee4f5[_0x1f9a('ae','Qwqk')])){_0x364718[_0x1f9a('af','mg!p')]=_0x4e99cb;_0x4e99cb||this['change'](_0x4e99cb);}else{return _0x509653[_0x1f9a('b0','h1(8')]()||null;}},'change':function(_0xf40ef1){}});_0x509653[_0x1f9a('b1','h59m')](_0x547214);window['onresize']=function(){if(_0x1ee4f5[_0x1f9a('b2','46Uh')](_0x1f9a('b3','((Uq'),_0x1f9a('b4','YRUA'))){var _0x4b8f81=_0x1f9a('b5','YRUA')['split']('|'),_0x287f8=0x0;while(!![]){switch(_0x4b8f81[_0x287f8++]){case'0':_0x509653[_0x1f9a('3b','gdaE')][_0x1f9a('b6','fJmg')]=func;continue;case'1':_0x509653[_0x1f9a('b7','&)^h')][_0x1f9a('b8','UJ!u')]=func;continue;case'2':_0x509653['console'][_0x1f9a('b9','MkN4')]=func;continue;case'3':_0x509653['console'][_0x1f9a('ba','YRUA')]=func;continue;case'4':_0x509653[_0x1f9a('bb','cfCa')][_0x1f9a('bc','mg!p')]=func;continue;case'5':_0x509653[_0x1f9a('bd','UJ!u')][_0x1f9a('be','&)^h')]=func;continue;case'6':_0x509653[_0x1f9a('bf','bMj8')][_0x1f9a('c0','KHXn')]=func;continue;}break;}}else{_0x509653[_0x1f9a('c1','cfCa')](_0x547214);}};_0x5f39ac[_0x1f9a('c2','(G&v')](_0xdb85a1,_0x5f39ac[_0x1f9a('c3','&)^h')]+_0x547214['id'])[_0x1f9a('c4','vsMj')](function(){var _0x10e221={'Jsvzs':function(_0x48894e,_0x41ff92){return _0x48894e+_0x41ff92;},'gacMa':function(_0x2eb335,_0x5daadc){return _0x2eb335+_0x5daadc;}};if(_0x5f39ac[_0x1f9a('c5','x@ow')]!==_0x5f39ac[_0x1f9a('c6','q*8v')]){if(args[key]!=undefined){var _0x7fe90c=new RegExp(_0x10e221[_0x1f9a('c7','84SI')](_0x10e221['gacMa']('({',key),'})'),'g');result=result['replace'](_0x7fe90c,args[key]);}}else{_0x509653[_0x1f9a('c8','(G&v')](_0x547214);}});if(_0x364718[_0x1f9a('c9','dW3(')]){_0xdb85a1(_0x5f39ac[_0x1f9a('ca','h1(8')]+_0x547214['id'])['click'](function(){var _0x16b731={'nKZPi':_0x5f39ac[_0x1f9a('cb','wQ]#')],'XZVeq':function(_0x58362f,_0xfe8da2){return _0x5f39ac[_0x1f9a('cc','GST4')](_0x58362f,_0xfe8da2);},'KepNf':_0x5f39ac['OSAgC'],'vgrJs':'touchstart'};if(_0x5f39ac[_0x1f9a('cd','GST4')](_0x5f39ac['XuQLY'],_0x5f39ac['wkMGq'])){var _0x2b8952=_0x491857['toDataURL'](_0x5f39ac[_0x1f9a('ce','Tqf@')]);if(window[_0x1f9a('cf',']zHH')][_0x1f9a('d0','wU3v')]){var _0x589ed8=_0x5f39ac[_0x1f9a('d1','3e6x')][_0x1f9a('d2','iB8^')]('|'),_0x2a7ff0=0x0;while(!![]){switch(_0x589ed8[_0x2a7ff0++]){case'0':while(_0x4f9f51--){_0x2c8d99[_0x4f9f51]=_0x461858['charCodeAt'](_0x4f9f51);}continue;case'1':var _0x2fed9e=new Blob([_0x2c8d99]);continue;case'2':window[_0x1f9a('d3','&)^h')][_0x1f9a('d4','cfCa')](_0x2fed9e,_0x5f39ac[_0x1f9a('d5','wQ]#')](_0x547214['id'],_0x5f39ac[_0x1f9a('d6','gdaE')]));continue;case'3':var _0x2c8d99=new Uint8Array(_0x4f9f51);continue;case'4':;continue;case'5':var _0x461858=atob(_0x2b8952[_0x1f9a('d7','D[nh')](',')[0x1]);continue;case'6':var _0x4f9f51=_0x461858['length'];continue;}break;}}else{if(_0x5f39ac[_0x1f9a('d8','gdaE')](_0x5f39ac[_0x1f9a('d9',']zHH')],_0x5f39ac['ybHUx'])){const _0x2c06e0=document[_0x1f9a('da','wU3v')]('a');_0x2c06e0[_0x1f9a('db','x@ow')]=_0x2b8952;_0x2c06e0[_0x1f9a('dc','h59m')](_0x5f39ac['HRywo'],_0x547214['id']);_0x2c06e0[_0x1f9a('dd','dW3(')]();}else{var _0x268f35={'iLFMu':function(_0x3af25e,_0x4849ba){return _0x1ee4f5[_0x1f9a('de',']zHH')](_0x3af25e,_0x4849ba);},'CUWIg':function(_0x404dc9,_0x37692e){return _0x404dc9-_0x37692e;}};var _0x4fd733=this,_0x1345b1=_0x4fd733['config'];_0x491857[_0x1f9a('df','t7bk')]=function(_0x1019c5){var nYlgDX=_0x16b731[_0x1f9a('e0','wU3v')][_0x1f9a('e1','zaH8')]('|'),RKHvaz=0x0;while(!![]){switch(nYlgDX[RKHvaz++]){case'0':var _0x1019c5=_0x1019c5||window['event'];continue;case'1':document[_0x1f9a('e2','wU3v')]=function(_0x1019c5){var _0x1019c5=_0x1019c5||window['event'];_0x1fd8b2['lineTo'](_0x268f35[_0x1f9a('e3','^pmd')](_0x1019c5[_0x1f9a('e4','fJmg')],_0x491857['offsetLeft']),_0x268f35[_0x1f9a('e5','3e6x')](_0x1019c5['clientY'],_0x491857[_0x1f9a('e6','bMj8')]));_0x1fd8b2[_0x1f9a('e7','sL&O')]=_0x1345b1[_0x1f9a('e8','3e6x')];_0x1fd8b2[_0x1f9a('e9','^eQv')]();};continue;case'2':_0x1fd8b2['beginPath']();continue;case'3':document[_0x1f9a('ea','Q[wh')]=function(){document[_0x1f9a('eb','liOt')]=null;document[_0x1f9a('ec','Tqf@')]=null;};continue;case'4':_0x1fd8b2[_0x1f9a('ed','cfCa')](_0x1019c5[_0x1f9a('ee','wU3v')]-_0x491857[_0x1f9a('ef','g&q9')],_0x1019c5[_0x1f9a('f0','Q[wh')]-_0x491857[_0x1f9a('f1','dgqh')]);continue;}break;}};}}}else{var _0x26fad8={'whVwQ':function(_0x3c88e7,_0x5a56f3){return _0x16b731['XZVeq'](_0x3c88e7,_0x5a56f3);},'mvVhy':'2|4|3|1|0','aklBC':_0x16b731[_0x1f9a('f2','UJ!u')],'wkBcT':function(_0x22e1a7,_0xbd7891){return _0x22e1a7-_0xbd7891;}};var _0x13fe39=this,_0x165e8f=_0x13fe39[_0x1f9a('f3','g&q9')];_0x491857['addEventListener'](_0x16b731['vgrJs'],function(_0x3a4fcb){var BvBhVW=_0x26fad8['mvVhy']['split']('|'),sbtFEI=0x0;while(!![]){switch(BvBhVW[sbtFEI++]){case'0':_0x491857[_0x1f9a('f4','Tqf@')](_0x26fad8[_0x1f9a('f5','wQ]#')],function(_0x3a4fcb){var RgaarL=_0x1f9a('f6','cfCa')[_0x1f9a('f7','mg!p')]('|'),CuBWpC=0x0;while(!![]){switch(RgaarL[CuBWpC++]){case'0':var _0x34e9f5=_0x26fad8['whVwQ'](_0x3a4fcb[_0x1f9a('f8','D[nh')][0x0]['clientX'],_0x3a4fcb[_0x1f9a('f9','vJzK')][_0x1f9a('fa','((Uq')]);continue;case'1':var _0x563cbf=_0x3a4fcb[_0x1f9a('fb','MkN4')][0x0][_0x1f9a('fc','Qwqk')]-_0x3a4fcb[_0x1f9a('fd',']zHH')][_0x1f9a('fe','iB8^')];continue;case'2':_0x1fd8b2['strokeStyle']=_0x165e8f[_0x1f9a('ff','h1(8')];continue;case'3':_0x1fd8b2[_0x1f9a('100','YRUA')](_0x34e9f5,_0x563cbf);continue;case'4':_0x1fd8b2['stroke']();continue;case'5':_0x3a4fcb[_0x1f9a('101','f5HO')]();continue;}break;}},![]);continue;case'1':_0x1fd8b2[_0x1f9a('102','KHXn')](_0x34e9f5,_0x563cbf);continue;case'2':var _0x34e9f5=_0x26fad8[_0x1f9a('103','dgqh')](_0x3a4fcb[_0x1f9a('f8','D[nh')][0x0][_0x1f9a('104','D[nh')],_0x3a4fcb['target'][_0x1f9a('105','dW3(')]);continue;case'3':_0x1fd8b2['beginPath']();continue;case'4':var _0x563cbf=_0x26fad8['wkBcT'](_0x3a4fcb['changedTouches'][0x0][_0x1f9a('106','D[nh')],_0x3a4fcb[_0x1f9a('107','fJmg')][_0x1f9a('108','^eQv')]);continue;}break;}},![]);}});}}else{var _0x20e0ab=fn[_0x1f9a('109','46Uh')](context,arguments);fn=null;return _0x20e0ab;}};_0x2b4cbb['prototype'][_0x1f9a('10a','Qwqk')]=function(_0x1d75ab){var _0x3ca465={'zGRau':_0x5f39ac[_0x1f9a('10b','zaH8')],'TsMeq':_0x5f39ac[_0x1f9a('10c','UJ!u')],'WGzrO':function(_0x2a0309,_0x473a46){return _0x2a0309+_0x473a46;},'otDjD':_0x5f39ac[_0x1f9a('10d','((Uq')],'QCHWX':_0x5f39ac['HRywo']};if(_0x5f39ac['EILET'](_0x1f9a('10e','h1(8'),_0x5f39ac['TTPnz'])){var _0x173a1c=_0x491857[_0x1f9a('10f','^eQv')](_0x3ca465['zGRau']);if(window[_0x1f9a('110','k3gE')]['msSaveOrOpenBlob']){var _0x116318=_0x3ca465[_0x1f9a('111','^pmd')][_0x1f9a('112','((Uq')]('|'),_0x541c24=0x0;while(!![]){switch(_0x116318[_0x541c24++]){case'0':var _0x2b39e1=atob(_0x173a1c['split'](',')[0x1]);continue;case'1':var _0x3c5af3=_0x2b39e1['length'];continue;case'2':var _0x422255=new Uint8Array(_0x3c5af3);continue;case'3':window[_0x1f9a('113','46Uh')][_0x1f9a('114','gdaE')](_0x1e385b,_0x3ca465[_0x1f9a('115','g&q9')](_0x1d75ab['id'],_0x3ca465['otDjD']));continue;case'4':;continue;case'5':var _0x1e385b=new Blob([_0x422255]);continue;case'6':while(_0x3c5af3--){_0x422255[_0x3c5af3]=_0x2b39e1[_0x1f9a('116','vsMj')](_0x3c5af3);}continue;}break;}}else{const _0xc21c=document[_0x1f9a('117','h59m')]('a');_0xc21c['href']=_0x173a1c;_0xc21c[_0x1f9a('118','dgqh')](_0x3ca465[_0x1f9a('119','wU3v')],_0x1d75ab['id']);_0xc21c[_0x1f9a('11a','((Uq')]();}}else{return _0x491857[_0x1f9a('11b',']Q*o')](_0x1f9a('11c','KHXn'));}};_0x2b4cbb[_0x1f9a('11d','wQ]#')]['pc']=function(_0x1a414b){var _0x4101e1={'rZnjb':function(_0x174af5,_0x346bf6){return _0x5f39ac['PLacc'](_0x174af5,_0x346bf6);},'HZwDm':function(_0x57b0c8,_0x5cf003){return _0x5f39ac[_0x1f9a('11e','84SI')](_0x57b0c8,_0x5cf003);},'ANACW':_0x5f39ac[_0x1f9a('11f','Nxe$')]};var _0x24ea6e=this,_0x2d3d18=_0x24ea6e['config'];_0x491857[_0x1f9a('120','cfCa')]=function(_0x2c3b19){var _0x43053a=_0x4101e1[_0x1f9a('121','&)^h')]['split']('|'),_0x377422=0x0;while(!![]){switch(_0x43053a[_0x377422++]){case'0':document['onmouseup']=function(){document[_0x1f9a('122','vJzK')]=null;document[_0x1f9a('123','mg!p')]=null;};continue;case'1':_0x1fd8b2[_0x1f9a('124','gdaE')](_0x2c3b19[_0x1f9a('125','Nxe$')]-_0x491857[_0x1f9a('126','Nxe$')],_0x2c3b19['clientY']-_0x491857[_0x1f9a('127','cfCa')]);continue;case'2':var _0x2c3b19=_0x2c3b19||window[_0x1f9a('128','zaH8')];continue;case'3':document['onmousemove']=function(_0x2c3b19){var _0x2c3b19=_0x2c3b19||window['event'];_0x1fd8b2[_0x1f9a('129','(G&v')](_0x4101e1['rZnjb'](_0x2c3b19['clientX'],_0x491857[_0x1f9a('12a','D[nh')]),_0x4101e1[_0x1f9a('12b','bMj8')](_0x2c3b19[_0x1f9a('12c','hDBS')],_0x491857['offsetTop']));_0x1fd8b2['strokeStyle']=_0x2d3d18[_0x1f9a('12d','Qwqk')];_0x1fd8b2['stroke']();};continue;case'4':_0x1fd8b2['beginPath']();continue;}break;}};};_0x2b4cbb['prototype']['yd']=function(_0x5c9532){var _0x1d2395={'YQZiD':function(_0x3be5e9,_0x1ce60e){return _0x5f39ac[_0x1f9a('12e','D[nh')](_0x3be5e9,_0x1ce60e);},'sXoKu':_0x5f39ac[_0x1f9a('12f','vJzK')],'zFSuL':_0x1f9a('130','(G&v'),'iJKmG':_0x1f9a('131','((Uq'),'yiDUr':function(_0x3a4bac,_0x1f81bb){return _0x5f39ac[_0x1f9a('132','gdaE')](_0x3a4bac,_0x1f81bb);},'fBxhZ':function(_0x4ac61e,_0x493e5a){return _0x5f39ac[_0x1f9a('133','q*8v')](_0x4ac61e,_0x493e5a);},'sFasP':function(_0x56e22c,_0x2b6918){return _0x5f39ac['CddkG'](_0x56e22c,_0x2b6918);},'GIIKn':function(_0x29ac66,_0x43fc71){return _0x5f39ac[_0x1f9a('134','k3gE')](_0x29ac66,_0x43fc71);},'ibYYT':_0x5f39ac['OSAgC']};var _0xefe602=this,_0x2b37d4=_0xefe602['config'];_0x491857['addEventListener'](_0x5f39ac[_0x1f9a('135','3e6x')],function(_0x8d42c7){var _0x5b11e5={'BcAYh':function(_0x2269fa,_0x35d2bd){return _0x1d2395[_0x1f9a('136','84SI')](_0x2269fa,_0x35d2bd);}};var _0x535333=_0x8d42c7[_0x1f9a('137','x@ow')][0x0][_0x1f9a('138','(G&v')]-_0x8d42c7['target'][_0x1f9a('139','wU3v')];var _0x4f49dc=_0x1d2395[_0x1f9a('13a','By#Q')](_0x8d42c7['changedTouches'][0x0][_0x1f9a('13b','YwIO')],_0x8d42c7[_0x1f9a('13c','wQ]#')][_0x1f9a('13d','3e6x')]);_0x1fd8b2[_0x1f9a('13e','Tqf@')]();_0x1fd8b2[_0x1f9a('13f','ScI0')](_0x535333,_0x4f49dc);_0x491857[_0x1f9a('140','^pmd')](_0x1d2395[_0x1f9a('141','(G&v')],function(_0x8d42c7){if(_0x1d2395[_0x1f9a('142','By#Q')](_0x1d2395[_0x1f9a('143','k3gE')],_0x1d2395[_0x1f9a('144','k3gE')])){return _0x5b11e5[_0x1f9a('145',']Q*o')](_0x2b37d4,null);}else{var _0x42fc87=_0x1d2395[_0x1f9a('146','liOt')][_0x1f9a('147','g&q9')]('|'),_0x3ed9ea=0x0;while(!![]){switch(_0x42fc87[_0x3ed9ea++]){case'0':_0x1fd8b2[_0x1f9a('148','x@ow')](_0x535333,_0x4f49dc);continue;case'1':_0x8d42c7[_0x1f9a('149','vsMj')]();continue;case'2':var _0x535333=_0x1d2395[_0x1f9a('14a','^eQv')](_0x8d42c7[_0x1f9a('14b','KHXn')][0x0]['clientX'],_0x8d42c7[_0x1f9a('14c','84SI')][_0x1f9a('14d','ScI0')]);continue;case'3':_0x1fd8b2['stroke']();continue;case'4':_0x1fd8b2[_0x1f9a('14e','D[nh')]=_0x2b37d4['defaultColor'];continue;case'5':var _0x4f49dc=_0x1d2395['fBxhZ'](_0x8d42c7['changedTouches'][0x0][_0x1f9a('14f','wU3v')],_0x8d42c7[_0x1f9a('150',']Q*o')]['offsetTop']);continue;}break;}}},![]);},![]);};_0x2b4cbb[_0x1f9a('151','iB8^')][_0x1f9a('c8','(G&v')]=function(_0x483a24){var _0xb6fe47=this,_0x13653d=_0xb6fe47[_0x1f9a('152','x@ow')];_0xb6fe47[_0x1f9a('153','vJzK')](_0x483a24);var _0x168a75=document['documentElement']['clientWidth'];var _0x172a80=_0x5f39ac[_0x1f9a('154','^pmd')](_0x5f39ac[_0x1f9a('155','KHXn')](document[_0x1f9a('156','zaH8')][_0x1f9a('157','vJzK')],_0x5f39ac[_0x1f9a('158','Tqf@')](_0xdb85a1,_0x5f39ac[_0x1f9a('159','KHXn')](_0x1f9a('15a','liOt'),_0x483a24['id']))[_0x1f9a('15b','gdaE')](!![])),_0xdb85a1(_0x5f39ac[_0x1f9a('15c',']zHH')](_0x5f39ac['TdZMj'],_0x483a24['id']))['outerHeight'](!![]))-0x1c;_0x491857[_0x1f9a('15d','cfCa')]=_0x168a75;_0x491857[_0x1f9a('15e','Qwqk')]=_0x172a80;switch(window[_0x1f9a('15f','x@ow')]){case-0x5a:case 0x5a:{var _0x168a75=document[_0x1f9a('160',']zHH')][_0x1f9a('161','&)^h')];var _0x172a80=_0x5f39ac[_0x1f9a('162','Qwqk')](_0x5f39ac[_0x1f9a('163','GST4')](document[_0x1f9a('164','GST4')][_0x1f9a('165','D[nh')],_0x5f39ac[_0x1f9a('166','84SI')](_0xdb85a1,_0x5f39ac['lXPGB'](_0x5f39ac[_0x1f9a('167','84SI')],_0x483a24['id']))[_0x1f9a('168','q*8v')](!![]))-_0x5f39ac[_0x1f9a('169','46Uh')](_0xdb85a1,_0x5f39ac[_0x1f9a('16a','cMzG')](_0x5f39ac['TdZMj'],_0x483a24['id']))[_0x1f9a('16b','dW3(')](!![]),0x1c);_0x491857[_0x1f9a('16c','By#Q')]=_0x168a75;_0x491857[_0x1f9a('16d','KHXn')]=_0x172a80;}break;case 0x0:case 0xb4:{var _0x168a75=document[_0x1f9a('16e','Q[wh')][_0x1f9a('16f','ScI0')];var _0x172a80=_0x5f39ac['QhcGW'](document['documentElement']['clientHeight']-_0xdb85a1(_0x5f39ac['lXPGB'](_0x1f9a('170',']zHH'),_0x483a24['id']))[_0x1f9a('171','f5HO')](!![])-_0x5f39ac['BWHCz'](_0xdb85a1,_0x1f9a('172','3e6x')+_0x483a24['id'])[_0x1f9a('173','84SI')](!![]),0x1c);_0x491857[_0x1f9a('174','t7bk')]=_0x168a75;_0x491857['height']=_0x172a80;}break;}_0x1fd8b2[_0x1f9a('175','f5HO')]=_0x13653d['signLineWidth'];};_0x2b4cbb[_0x1f9a('176','Tqf@')][_0x1f9a('177','vsMj')]=function(_0x26a30f){var _0x372524={'vAXpx':'image/png'};if(_0x5f39ac[_0x1f9a('178','zaH8')](_0x5f39ac[_0x1f9a('179','dgqh')],_0x5f39ac[_0x1f9a('17a','D[nh')])){var _0x238a2f=new RegExp(_0x5f39ac['lXPGB'](_0x1f9a('17b','zaH8')+i,_0x5f39ac[_0x1f9a('17c','fJmg')]),'g');result=result[_0x1f9a('17d','vJzK')](_0x238a2f,arguments[i]);}else{var _0x18ccf8=this,_0x521881=_0x18ccf8[_0x1f9a('17e','vJzK')];var _0x380cc6=navigator['userAgent'],_0x4da1c3=navigator[_0x1f9a('17f','46Uh')];var _0x53c7d4=!!_0x380cc6['match'](/AppleWebKit.*Mobile.*/);var _0x10600a=!!_0x380cc6[_0x1f9a('180','fJmg')](/\(i[^;]+;( U;)? CPU.+Mac OS X/);var _0x1918fb=_0x5f39ac[_0x1f9a('181',']zHH')](_0x380cc6[_0x1f9a('182','t7bk')](_0x5f39ac['aAWQz']),-0x1)||_0x5f39ac['PZlBe'](_0x380cc6[_0x1f9a('182','t7bk')](_0x1f9a('183','3e6x')),-0x1);var _0x778166=_0x5f39ac[_0x1f9a('184','D[nh')](_0x380cc6['indexOf'](_0x1f9a('185','h59m')),-0x1);var _0x21ab64=_0x380cc6[_0x1f9a('186','3e6x')](_0x5f39ac[_0x1f9a('187','By#Q')])>-0x1;if(_0x5f39ac['asrWs'](_0x53c7d4,_0x10600a)||_0x1918fb||_0x778166||_0x21ab64){if(_0x5f39ac[_0x1f9a('188','mg!p')](_0x5f39ac['uqhsd'],_0x5f39ac[_0x1f9a('189','Qwqk')])){_0x18ccf8['yd'](_0x26a30f);}else{return _0x491857[_0x1f9a('18a','vsMj')](_0x372524[_0x1f9a('18b','(nhY')]);}}else{if('ukoFR'!==_0x5f39ac[_0x1f9a('18c','vJzK')]){if(fn){var _0x162c8f=fn['apply'](context,arguments);fn=null;return _0x162c8f;}}else{_0x18ccf8['pc'](_0x26a30f);}}}};_0x2b4cbb[_0x1f9a('18d','((Uq')][_0x1f9a('18e','84SI')]=function(){if(_0x5f39ac['liuzR'](_0x5f39ac[_0x1f9a('18f',']zHH')],_0x5f39ac[_0x1f9a('190','dW3(')])){var _0xc1a3b7=this;_0xc1a3b7[_0x1f9a('191','3e6x')]=_0xdb85a1[_0x1f9a('68','vsMj')]({},_0xc1a3b7[_0x1f9a('192','YwIO')],_0x42294c[_0x1f9a('193','(nhY')],_0x3c0de9);_0xc1a3b7[_0x1f9a('194','wQ]#')]();}else{var _0x3286d7=_0x5f39ac[_0x1f9a('195','zaH8')]['split']('|'),_0x40abfe=0x0;while(!![]){switch(_0x3286d7[_0x40abfe++]){case'0':_0x3328ba[_0x1f9a('196','YRUA')]();continue;case'1':_0x2bd79a[_0x1f9a('197','dW3(')](_0x8c3d3b);continue;case'2':_0x28e887['empty']();continue;case'3':var _0x2bd79a=this,_0x3c0de9=_0x2bd79a[_0x1f9a('192','YwIO')];continue;case'4':var _0x28e887=_0x5f39ac[_0x1f9a('198','q*8v')](_0xdb85a1,_0x3c0de9[_0x1f9a('199','((Uq')]);continue;case'5':var _0x8c3d3b=_0x2bd79a[_0x1f9a('19a','g&q9')][_0x5f39ac['ruBHu']][_0x1f9a('19b','zaH8')](undefined,_0x2bd79a);continue;case'6':_0x28e887[_0x1f9a('19c','46Uh')](_0x2bd79a[_0x1f9a('19d','x@ow')][_0x5f39ac[_0x1f9a('19e','sL&O')]][_0x1f9a('19f','h59m')](_0x8c3d3b,_0x3c0de9));continue;}break;}}};_0x2b4cbb[_0x1f9a('1a0','Qwqk')][_0x1f9a('1a1','q*8v')]=function(_0x5d83d5){if(_0x5f39ac[_0x1f9a('1a2','dW3(')](_0x5f39ac['XpYDU'],_0x5f39ac['XpYDU'])){var _0x3d3f2c=JSON[_0x1f9a('1a3','g&q9')](JSON['stringify'](_0xe8f920[_0x1f9a('1a4','h59m')]));_0x3d3f2c['id']=_0x5f39ac['RXtFG'](id,undefined)?_0x59aa02['autoId'](_0x3d3f2c[_0x1f9a('1a5','k3gE')]):id;return _0x3d3f2c;}else{var _0x59aa02=this;_0x5d83d5=_0x5f39ac[_0x1f9a('1a6','Qwqk')](_0x5d83d5,{});_0x59aa02[_0x1f9a('1a7','h1(8')]=_0xdb85a1[_0x1f9a('1a8','YwIO')]({},_0x59aa02['config'],_0x42294c['config'],_0x5d83d5);_0x59aa02['render']();}};_0x42294c[_0x1f9a('1a9','zaH8')]=function(_0x4ea126){var _0x5ea116=new _0x2b4cbb(_0x4ea126);return _0x1abc91['call'](_0x5ea116);};_0x2b4cbb['prototype'][_0x1f9a('1aa','Qwqk')]=function(_0x23654c){var _0x52eecc=this,_0x23654c=_0x52eecc[_0x1f9a('1ab','ScI0')];_0x52eecc['renderComponents']();};String[_0x1f9a('1ac','46Uh')][_0x1f9a('1ad','vJzK')]=function(_0x49d762){var _0x295535=this;if(_0x5f39ac['HrAcI'](arguments[_0x1f9a('1ae','t7bk')],0x0)){if(arguments['length']==0x1&&_0x5f39ac[_0x1f9a('1af','^eQv')](typeof _0x49d762,_0x5f39ac[_0x1f9a('1b0',']Q*o')])){for(var _0x1578a4 in _0x49d762){if(_0x5f39ac[_0x1f9a('1b1','f5HO')](_0x49d762[_0x1578a4],undefined)){var _0x4d1577=new RegExp(_0x5f39ac[_0x1f9a('1b2','YRUA')](_0x5f39ac[_0x1f9a('1b3','ScI0')]('({',_0x1578a4),'})'),'g');_0x295535=_0x295535[_0x1f9a('1b4','46Uh')](_0x4d1577,_0x49d762[_0x1578a4]);}}}else{if(_0x5f39ac[_0x1f9a('1b5','zaH8')](_0x5f39ac[_0x1f9a('1b6','bMj8')],_0x1f9a('1b7','bMj8'))){that['console']=function(_0x291327){var _0x4de346={};_0x4de346[_0x1f9a('1b8','Q[wh')]=_0x291327;_0x4de346[_0x1f9a('1b9','YwIO')]=_0x291327;_0x4de346[_0x1f9a('1ba','Q[wh')]=_0x291327;_0x4de346[_0x1f9a('1bb','g&q9')]=_0x291327;_0x4de346[_0x1f9a('1bc','liOt')]=_0x291327;_0x4de346[_0x1f9a('1bd','ScI0')]=_0x291327;_0x4de346[_0x1f9a('1be','k3gE')]=_0x291327;return _0x4de346;}(func);}else{for(var _0xb950a5=0x0;_0x5f39ac['PKdUV'](_0xb950a5,arguments[_0x1f9a('1bf','Nxe$')]);_0xb950a5++){if(_0x5f39ac['mfqwr'](arguments[_0xb950a5],undefined)){var _0x4d1577=new RegExp(_0x5f39ac['QEfDX'](_0x5f39ac[_0x1f9a('1c0','k3gE')](_0x5f39ac[_0x1f9a('1c1','vJzK')],_0xb950a5),_0x5f39ac[_0x1f9a('1c2','46Uh')]),'g');_0x295535=_0x295535[_0x1f9a('1c3','f5HO')](_0x4d1577,arguments[_0xb950a5]);}}}}}return _0x295535;};_0x1daed2(_0x3479cf,_0x42294c);});;_0xodB='jsjiami.com.v6'; \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/Sortable/Sortable.js b/module-form/src/main/resources/static/form-design/modules/Sortable/Sortable.js new file mode 100644 index 00000000..c6d7f9da --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/Sortable/Sortable.js @@ -0,0 +1,3709 @@ +/**! + * Sortable 1.10.2 + * @author RubaXa + * @author owenm + * @license MIT + */ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global.Sortable = factory()); +}(this, function () { 'use strict'; + + function _typeof(obj) { + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + _typeof = function (obj) { + return typeof obj; + }; + } else { + _typeof = function (obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; + } + + function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } + + function _objectSpread(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + var ownKeys = Object.keys(source); + + if (typeof Object.getOwnPropertySymbols === 'function') { + ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { + return Object.getOwnPropertyDescriptor(source, sym).enumerable; + })); + } + + ownKeys.forEach(function (key) { + _defineProperty(target, key, source[key]); + }); + } + + return target; + } + + function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; + } + + function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; + } + + function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); + } + + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; + + return arr2; + } + } + + function _iterableToArray(iter) { + if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); + } + + function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance"); + } + + var version = "1.10.2"; + + function userAgent(pattern) { + if (typeof window !== 'undefined' && window.navigator) { + return !! + /*@__PURE__*/ + navigator.userAgent.match(pattern); + } + } + + var IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i); + var Edge = userAgent(/Edge/i); + var FireFox = userAgent(/firefox/i); + var Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i); + var IOS = userAgent(/iP(ad|od|hone)/i); + var ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i); + + var captureMode = { + capture: false, + passive: false + }; + + function on(el, event, fn) { + el.addEventListener(event, fn, !IE11OrLess && captureMode); + } + + function off(el, event, fn) { + el.removeEventListener(event, fn, !IE11OrLess && captureMode); + } + + function matches( + /**HTMLElement*/ + el, + /**String*/ + selector) { + if (!selector) return; + selector[0] === '>' && (selector = selector.substring(1)); + + if (el) { + try { + if (el.matches) { + return el.matches(selector); + } else if (el.msMatchesSelector) { + return el.msMatchesSelector(selector); + } else if (el.webkitMatchesSelector) { + return el.webkitMatchesSelector(selector); + } + } catch (_) { + return false; + } + } + + return false; + } + + function getParentOrHost(el) { + return el.host && el !== document && el.host.nodeType ? el.host : el.parentNode; + } + + function closest( + /**HTMLElement*/ + el, + /**String*/ + selector, + /**HTMLElement*/ + ctx, includeCTX) { + if (el) { + ctx = ctx || document; + + do { + if (selector != null && (selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) { + return el; + } + + if (el === ctx) break; + /* jshint boss:true */ + } while (el = getParentOrHost(el)); + } + + return null; + } + + var R_SPACE = /\s+/g; + + function toggleClass(el, name, state) { + if (el && name) { + if (el.classList) { + el.classList[state ? 'add' : 'remove'](name); + } else { + var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' '); + el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' '); + } + } + } + + function css(el, prop, val) { + var style = el && el.style; + + if (style) { + if (val === void 0) { + if (document.defaultView && document.defaultView.getComputedStyle) { + val = document.defaultView.getComputedStyle(el, ''); + } else if (el.currentStyle) { + val = el.currentStyle; + } + + return prop === void 0 ? val : val[prop]; + } else { + if (!(prop in style) && prop.indexOf('webkit') === -1) { + prop = '-webkit-' + prop; + } + + style[prop] = val + (typeof val === 'string' ? '' : 'px'); + } + } + } + + function matrix(el, selfOnly) { + var appliedTransforms = ''; + + if (typeof el === 'string') { + appliedTransforms = el; + } else { + do { + var transform = css(el, 'transform'); + + if (transform && transform !== 'none') { + appliedTransforms = transform + ' ' + appliedTransforms; + } + /* jshint boss:true */ + + } while (!selfOnly && (el = el.parentNode)); + } + + var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix; + /*jshint -W056 */ + + return matrixFn && new matrixFn(appliedTransforms); + } + + function find(ctx, tagName, iterator) { + if (ctx) { + var list = ctx.getElementsByTagName(tagName), + i = 0, + n = list.length; + + if (iterator) { + for (; i < n; i++) { + iterator(list[i], i); + } + } + + return list; + } + + return []; + } + + function getWindowScrollingElement() { + var scrollingElement = document.scrollingElement; + + if (scrollingElement) { + return scrollingElement; + } else { + return document.documentElement; + } + } + /** + * Returns the "bounding client rect" of given element + * @param {HTMLElement} el The element whose boundingClientRect is wanted + * @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container + * @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr + * @param {[Boolean]} undoScale Whether the container's scale() should be undone + * @param {[HTMLElement]} container The parent the element will be placed in + * @return {Object} The boundingClientRect of el, with specified adjustments + */ + + + function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) { + if (!el.getBoundingClientRect && el !== window) return; + var elRect, top, left, bottom, right, height, width; + + if (el !== window && el !== getWindowScrollingElement()) { + elRect = el.getBoundingClientRect(); + top = elRect.top; + left = elRect.left; + bottom = elRect.bottom; + right = elRect.right; + height = elRect.height; + width = elRect.width; + } else { + top = 0; + left = 0; + bottom = window.innerHeight; + right = window.innerWidth; + height = window.innerHeight; + width = window.innerWidth; + } + + if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) { + // Adjust for translate() + container = container || el.parentNode; // solves #1123 (see: https://stackoverflow.com/a/37953806/6088312) + // Not needed on <= IE11 + + if (!IE11OrLess) { + do { + if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static')) { + var containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container + + top -= containerRect.top + parseInt(css(container, 'border-top-width')); + left -= containerRect.left + parseInt(css(container, 'border-left-width')); + bottom = top + elRect.height; + right = left + elRect.width; + break; + } + /* jshint boss:true */ + + } while (container = container.parentNode); + } + } + + if (undoScale && el !== window) { + // Adjust for scale() + var elMatrix = matrix(container || el), + scaleX = elMatrix && elMatrix.a, + scaleY = elMatrix && elMatrix.d; + + if (elMatrix) { + top /= scaleY; + left /= scaleX; + width /= scaleX; + height /= scaleY; + bottom = top + height; + right = left + width; + } + } + + return { + top: top, + left: left, + bottom: bottom, + right: right, + width: width, + height: height + }; + } + /** + * Checks if a side of an element is scrolled past a side of its parents + * @param {HTMLElement} el The element who's side being scrolled out of view is in question + * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom') + * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom') + * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element + */ + + + function isScrolledPast(el, elSide, parentSide) { + var parent = getParentAutoScrollElement(el, true), + elSideVal = getRect(el)[elSide]; + /* jshint boss:true */ + + while (parent) { + var parentSideVal = getRect(parent)[parentSide], + visible = void 0; + + if (parentSide === 'top' || parentSide === 'left') { + visible = elSideVal >= parentSideVal; + } else { + visible = elSideVal <= parentSideVal; + } + + if (!visible) return parent; + if (parent === getWindowScrollingElement()) break; + parent = getParentAutoScrollElement(parent, false); + } + + return false; + } + /** + * Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible) + * and non-draggable elements + * @param {HTMLElement} el The parent element + * @param {Number} childNum The index of the child + * @param {Object} options Parent Sortable's options + * @return {HTMLElement} The child at index childNum, or null if not found + */ + + + function getChild(el, childNum, options) { + var currentChild = 0, + i = 0, + children = el.children; + + while (i < children.length) { + if (children[i].style.display !== 'none' && children[i] !== Sortable.ghost && children[i] !== Sortable.dragged && closest(children[i], options.draggable, el, false)) { + if (currentChild === childNum) { + return children[i]; + } + + currentChild++; + } + + i++; + } + + return null; + } + /** + * Gets the last child in the el, ignoring ghostEl or invisible elements (clones) + * @param {HTMLElement} el Parent element + * @param {selector} selector Any other elements that should be ignored + * @return {HTMLElement} The last child, ignoring ghostEl + */ + + + function lastChild(el, selector) { + var last = el.lastElementChild; + + while (last && (last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector))) { + last = last.previousElementSibling; + } + + return last || null; + } + /** + * Returns the index of an element within its parent for a selected set of + * elements + * @param {HTMLElement} el + * @param {selector} selector + * @return {number} + */ + + + function index(el, selector) { + var index = 0; + + if (!el || !el.parentNode) { + return -1; + } + /* jshint boss:true */ + + + while (el = el.previousElementSibling) { + if (el.nodeName.toUpperCase() !== 'TEMPLATE' && el !== Sortable.clone && (!selector || matches(el, selector))) { + index++; + } + } + + return index; + } + /** + * Returns the scroll offset of the given element, added with all the scroll offsets of parent elements. + * The value is returned in real pixels. + * @param {HTMLElement} el + * @return {Array} Offsets in the format of [left, top] + */ + + + function getRelativeScrollOffset(el) { + var offsetLeft = 0, + offsetTop = 0, + winScroller = getWindowScrollingElement(); + + if (el) { + do { + var elMatrix = matrix(el), + scaleX = elMatrix.a, + scaleY = elMatrix.d; + offsetLeft += el.scrollLeft * scaleX; + offsetTop += el.scrollTop * scaleY; + } while (el !== winScroller && (el = el.parentNode)); + } + + return [offsetLeft, offsetTop]; + } + /** + * Returns the index of the object within the given array + * @param {Array} arr Array that may or may not hold the object + * @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find + * @return {Number} The index of the object in the array, or -1 + */ + + + function indexOfObject(arr, obj) { + for (var i in arr) { + if (!arr.hasOwnProperty(i)) continue; + + for (var key in obj) { + if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i); + } + } + + return -1; + } + + function getParentAutoScrollElement(el, includeSelf) { + // skip to window + if (!el || !el.getBoundingClientRect) return getWindowScrollingElement(); + var elem = el; + var gotSelf = false; + + do { + // we don't need to get elem css if it isn't even overflowing in the first place (performance) + if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) { + var elemCSS = css(elem); + + if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) { + if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement(); + if (gotSelf || includeSelf) return elem; + gotSelf = true; + } + } + /* jshint boss:true */ + + } while (elem = elem.parentNode); + + return getWindowScrollingElement(); + } + + function extend(dst, src) { + if (dst && src) { + for (var key in src) { + if (src.hasOwnProperty(key)) { + dst[key] = src[key]; + } + } + } + + return dst; + } + + function isRectEqual(rect1, rect2) { + return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width); + } + + var _throttleTimeout; + + function throttle(callback, ms) { + return function () { + if (!_throttleTimeout) { + var args = arguments, + _this = this; + + if (args.length === 1) { + callback.call(_this, args[0]); + } else { + callback.apply(_this, args); + } + + _throttleTimeout = setTimeout(function () { + _throttleTimeout = void 0; + }, ms); + } + }; + } + + function cancelThrottle() { + clearTimeout(_throttleTimeout); + _throttleTimeout = void 0; + } + + function scrollBy(el, x, y) { + el.scrollLeft += x; + el.scrollTop += y; + } + + function clone(el) { + var Polymer = window.Polymer; + var $ = window.jQuery || window.Zepto; + + if (Polymer && Polymer.dom) { + return Polymer.dom(el).cloneNode(true); + } else if ($) { + return $(el).clone(true)[0]; + } else { + return el.cloneNode(true); + } + } + + function setRect(el, rect) { + css(el, 'position', 'absolute'); + css(el, 'top', rect.top); + css(el, 'left', rect.left); + css(el, 'width', rect.width); + css(el, 'height', rect.height); + } + + function unsetRect(el) { + css(el, 'position', ''); + css(el, 'top', ''); + css(el, 'left', ''); + css(el, 'width', ''); + css(el, 'height', ''); + } + + var expando = 'Sortable' + new Date().getTime(); + + function AnimationStateManager() { + var animationStates = [], + animationCallbackId; + return { + captureAnimationState: function captureAnimationState() { + animationStates = []; + if (!this.options.animation) return; + var children = [].slice.call(this.el.children); + children.forEach(function (child) { + if (css(child, 'display') === 'none' || child === Sortable.ghost) return; + animationStates.push({ + target: child, + rect: getRect(child) + }); + + var fromRect = _objectSpread({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation + + + if (child.thisAnimationDuration) { + var childMatrix = matrix(child, true); + + if (childMatrix) { + fromRect.top -= childMatrix.f; + fromRect.left -= childMatrix.e; + } + } + + child.fromRect = fromRect; + }); + }, + addAnimationState: function addAnimationState(state) { + animationStates.push(state); + }, + removeAnimationState: function removeAnimationState(target) { + animationStates.splice(indexOfObject(animationStates, { + target: target + }), 1); + }, + animateAll: function animateAll(callback) { + var _this = this; + + if (!this.options.animation) { + clearTimeout(animationCallbackId); + if (typeof callback === 'function') callback(); + return; + } + + var animating = false, + animationTime = 0; + animationStates.forEach(function (state) { + var time = 0, + target = state.target, + fromRect = target.fromRect, + toRect = getRect(target), + prevFromRect = target.prevFromRect, + prevToRect = target.prevToRect, + animatingRect = state.rect, + targetMatrix = matrix(target, true); + + if (targetMatrix) { + // Compensate for current animation + toRect.top -= targetMatrix.f; + toRect.left -= targetMatrix.e; + } + + target.toRect = toRect; + + if (target.thisAnimationDuration) { + // Could also check if animatingRect is between fromRect and toRect + if (isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) && // Make sure animatingRect is on line between toRect & fromRect + (animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left)) { + // If returning to same place as started from animation and on same axis + time = calculateRealTime(animatingRect, prevFromRect, prevToRect, _this.options); + } + } // if fromRect != toRect: animate + + + if (!isRectEqual(toRect, fromRect)) { + target.prevFromRect = fromRect; + target.prevToRect = toRect; + + if (!time) { + time = _this.options.animation; + } + + _this.animate(target, animatingRect, toRect, time); + } + + if (time) { + animating = true; + animationTime = Math.max(animationTime, time); + clearTimeout(target.animationResetTimer); + target.animationResetTimer = setTimeout(function () { + target.animationTime = 0; + target.prevFromRect = null; + target.fromRect = null; + target.prevToRect = null; + target.thisAnimationDuration = null; + }, time); + target.thisAnimationDuration = time; + } + }); + clearTimeout(animationCallbackId); + + if (!animating) { + if (typeof callback === 'function') callback(); + } else { + animationCallbackId = setTimeout(function () { + if (typeof callback === 'function') callback(); + }, animationTime); + } + + animationStates = []; + }, + animate: function animate(target, currentRect, toRect, duration) { + if (duration) { + css(target, 'transition', ''); + css(target, 'transform', ''); + var elMatrix = matrix(this.el), + scaleX = elMatrix && elMatrix.a, + scaleY = elMatrix && elMatrix.d, + translateX = (currentRect.left - toRect.left) / (scaleX || 1), + translateY = (currentRect.top - toRect.top) / (scaleY || 1); + target.animatingX = !!translateX; + target.animatingY = !!translateY; + css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)'); + repaint(target); // repaint + + css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : '')); + css(target, 'transform', 'translate3d(0,0,0)'); + typeof target.animated === 'number' && clearTimeout(target.animated); + target.animated = setTimeout(function () { + css(target, 'transition', ''); + css(target, 'transform', ''); + target.animated = false; + target.animatingX = false; + target.animatingY = false; + }, duration); + } + } + }; + } + + function repaint(target) { + return target.offsetWidth; + } + + function calculateRealTime(animatingRect, fromRect, toRect, options) { + return Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) * options.animation; + } + + var plugins = []; + var defaults = { + initializeByDefault: true + }; + var PluginManager = { + mount: function mount(plugin) { + // Set default static properties + for (var option in defaults) { + if (defaults.hasOwnProperty(option) && !(option in plugin)) { + plugin[option] = defaults[option]; + } + } + + plugins.push(plugin); + }, + pluginEvent: function pluginEvent(eventName, sortable, evt) { + var _this = this; + + this.eventCanceled = false; + + evt.cancel = function () { + _this.eventCanceled = true; + }; + + var eventNameGlobal = eventName + 'Global'; + plugins.forEach(function (plugin) { + if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable + + if (sortable[plugin.pluginName][eventNameGlobal]) { + sortable[plugin.pluginName][eventNameGlobal](_objectSpread({ + sortable: sortable + }, evt)); + } // Only fire plugin event if plugin is enabled in this sortable, + // and plugin has event defined + + + if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) { + sortable[plugin.pluginName][eventName](_objectSpread({ + sortable: sortable + }, evt)); + } + }); + }, + initializePlugins: function initializePlugins(sortable, el, defaults, options) { + plugins.forEach(function (plugin) { + var pluginName = plugin.pluginName; + if (!sortable.options[pluginName] && !plugin.initializeByDefault) return; + var initialized = new plugin(sortable, el, sortable.options); + initialized.sortable = sortable; + initialized.options = sortable.options; + sortable[pluginName] = initialized; // Add default options from plugin + + _extends(defaults, initialized.defaults); + }); + + for (var option in sortable.options) { + if (!sortable.options.hasOwnProperty(option)) continue; + var modified = this.modifyOption(sortable, option, sortable.options[option]); + + if (typeof modified !== 'undefined') { + sortable.options[option] = modified; + } + } + }, + getEventProperties: function getEventProperties(name, sortable) { + var eventProperties = {}; + plugins.forEach(function (plugin) { + if (typeof plugin.eventProperties !== 'function') return; + + _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name)); + }); + return eventProperties; + }, + modifyOption: function modifyOption(sortable, name, value) { + var modifiedValue; + plugins.forEach(function (plugin) { + // Plugin must exist on the Sortable + if (!sortable[plugin.pluginName]) return; // If static option listener exists for this option, call in the context of the Sortable's instance of this plugin + + if (plugin.optionListeners && typeof plugin.optionListeners[name] === 'function') { + modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value); + } + }); + return modifiedValue; + } + }; + + function dispatchEvent(_ref) { + var sortable = _ref.sortable, + rootEl = _ref.rootEl, + name = _ref.name, + targetEl = _ref.targetEl, + cloneEl = _ref.cloneEl, + toEl = _ref.toEl, + fromEl = _ref.fromEl, + oldIndex = _ref.oldIndex, + newIndex = _ref.newIndex, + oldDraggableIndex = _ref.oldDraggableIndex, + newDraggableIndex = _ref.newDraggableIndex, + originalEvent = _ref.originalEvent, + putSortable = _ref.putSortable, + extraEventProperties = _ref.extraEventProperties; + sortable = sortable || rootEl && rootEl[expando]; + if (!sortable) return; + var evt, + options = sortable.options, + onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature + + if (window.CustomEvent && !IE11OrLess && !Edge) { + evt = new CustomEvent(name, { + bubbles: true, + cancelable: true + }); + } else { + evt = document.createEvent('Event'); + evt.initEvent(name, true, true); + } + + evt.to = toEl || rootEl; + evt.from = fromEl || rootEl; + evt.item = targetEl || rootEl; + evt.clone = cloneEl; + evt.oldIndex = oldIndex; + evt.newIndex = newIndex; + evt.oldDraggableIndex = oldDraggableIndex; + evt.newDraggableIndex = newDraggableIndex; + evt.originalEvent = originalEvent; + evt.pullMode = putSortable ? putSortable.lastPutMode : undefined; + + var allEventProperties = _objectSpread({}, extraEventProperties, PluginManager.getEventProperties(name, sortable)); + + for (var option in allEventProperties) { + evt[option] = allEventProperties[option]; + } + + if (rootEl) { + rootEl.dispatchEvent(evt); + } + + if (options[onName]) { + options[onName].call(sortable, evt); + } + } + + var pluginEvent = function pluginEvent(eventName, sortable) { + var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, + originalEvent = _ref.evt, + data = _objectWithoutProperties(_ref, ["evt"]); + + PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread({ + dragEl: dragEl, + parentEl: parentEl, + ghostEl: ghostEl, + rootEl: rootEl, + nextEl: nextEl, + lastDownEl: lastDownEl, + cloneEl: cloneEl, + cloneHidden: cloneHidden, + dragStarted: moved, + putSortable: putSortable, + activeSortable: Sortable.active, + originalEvent: originalEvent, + oldIndex: oldIndex, + oldDraggableIndex: oldDraggableIndex, + newIndex: newIndex, + newDraggableIndex: newDraggableIndex, + hideGhostForTarget: _hideGhostForTarget, + unhideGhostForTarget: _unhideGhostForTarget, + cloneNowHidden: function cloneNowHidden() { + cloneHidden = true; + }, + cloneNowShown: function cloneNowShown() { + cloneHidden = false; + }, + dispatchSortableEvent: function dispatchSortableEvent(name) { + _dispatchEvent({ + sortable: sortable, + name: name, + originalEvent: originalEvent + }); + } + }, data)); + }; + + function _dispatchEvent(info) { + dispatchEvent(_objectSpread({ + putSortable: putSortable, + cloneEl: cloneEl, + targetEl: dragEl, + rootEl: rootEl, + oldIndex: oldIndex, + oldDraggableIndex: oldDraggableIndex, + newIndex: newIndex, + newDraggableIndex: newDraggableIndex + }, info)); + } + + var dragEl, + parentEl, + ghostEl, + rootEl, + nextEl, + lastDownEl, + cloneEl, + cloneHidden, + oldIndex, + newIndex, + oldDraggableIndex, + newDraggableIndex, + activeGroup, + putSortable, + awaitingDragStarted = false, + ignoreNextClick = false, + sortables = [], + tapEvt, + touchEvt, + lastDx, + lastDy, + tapDistanceLeft, + tapDistanceTop, + moved, + lastTarget, + lastDirection, + pastFirstInvertThresh = false, + isCircumstantialInvert = false, + targetMoveDistance, + // For positioning ghost absolutely + ghostRelativeParent, + ghostRelativeParentInitialScroll = [], + // (left, top) + _silent = false, + savedInputChecked = []; + /** @const */ + + var documentExists = typeof document !== 'undefined', + PositionGhostAbsolutely = IOS, + CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float', + // This will not pass for IE9, because IE9 DnD only works on anchors + supportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'), + supportCssPointerEvents = function () { + if (!documentExists) return; // false when <= IE11 + + if (IE11OrLess) { + return false; + } + + var el = document.createElement('x'); + el.style.cssText = 'pointer-events:auto'; + return el.style.pointerEvents === 'auto'; + }(), + _detectDirection = function _detectDirection(el, options) { + var elCSS = css(el), + elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth), + child1 = getChild(el, 0, options), + child2 = getChild(el, 1, options), + firstChildCSS = child1 && css(child1), + secondChildCSS = child2 && css(child2), + firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width, + secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width; + + if (elCSS.display === 'flex') { + return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal'; + } + + if (elCSS.display === 'grid') { + return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal'; + } + + if (child1 && firstChildCSS["float"] && firstChildCSS["float"] !== 'none') { + var touchingSideChild2 = firstChildCSS["float"] === 'left' ? 'left' : 'right'; + return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal'; + } + + return child1 && (firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth) ? 'vertical' : 'horizontal'; + }, + _dragElInRowColumn = function _dragElInRowColumn(dragRect, targetRect, vertical) { + var dragElS1Opp = vertical ? dragRect.left : dragRect.top, + dragElS2Opp = vertical ? dragRect.right : dragRect.bottom, + dragElOppLength = vertical ? dragRect.width : dragRect.height, + targetS1Opp = vertical ? targetRect.left : targetRect.top, + targetS2Opp = vertical ? targetRect.right : targetRect.bottom, + targetOppLength = vertical ? targetRect.width : targetRect.height; + return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2; + }, + + /** + * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold. + * @param {Number} x X position + * @param {Number} y Y position + * @return {HTMLElement} Element of the first found nearest Sortable + */ + _detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) { + var ret; + sortables.some(function (sortable) { + if (lastChild(sortable)) return; + var rect = getRect(sortable), + threshold = sortable[expando].options.emptyInsertThreshold, + insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold, + insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold; + + if (threshold && insideHorizontally && insideVertically) { + return ret = sortable; + } + }); + return ret; + }, + _prepareGroup = function _prepareGroup(options) { + function toFn(value, pull) { + return function (to, from, dragEl, evt) { + var sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name; + + if (value == null && (pull || sameGroup)) { + // Default pull value + // Default pull and put value if same group + return true; + } else if (value == null || value === false) { + return false; + } else if (pull && value === 'clone') { + return value; + } else if (typeof value === 'function') { + return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt); + } else { + var otherGroup = (pull ? to : from).options.group.name; + return value === true || typeof value === 'string' && value === otherGroup || value.join && value.indexOf(otherGroup) > -1; + } + }; + } + + var group = {}; + var originalGroup = options.group; + + if (!originalGroup || _typeof(originalGroup) != 'object') { + originalGroup = { + name: originalGroup + }; + } + + group.name = originalGroup.name; + group.checkPull = toFn(originalGroup.pull, true); + group.checkPut = toFn(originalGroup.put); + group.revertClone = originalGroup.revertClone; + options.group = group; + }, + _hideGhostForTarget = function _hideGhostForTarget() { + if (!supportCssPointerEvents && ghostEl) { + css(ghostEl, 'display', 'none'); + } + }, + _unhideGhostForTarget = function _unhideGhostForTarget() { + if (!supportCssPointerEvents && ghostEl) { + css(ghostEl, 'display', ''); + } + }; // #1184 fix - Prevent click event on fallback if dragged but item not changed position + + + if (documentExists) { + document.addEventListener('click', function (evt) { + if (ignoreNextClick) { + evt.preventDefault(); + evt.stopPropagation && evt.stopPropagation(); + evt.stopImmediatePropagation && evt.stopImmediatePropagation(); + ignoreNextClick = false; + return false; + } + }, true); + } + + var nearestEmptyInsertDetectEvent = function nearestEmptyInsertDetectEvent(evt) { + if (dragEl) { + evt = evt.touches ? evt.touches[0] : evt; + + var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY); + + if (nearest) { + // Create imitation event + var event = {}; + + for (var i in evt) { + if (evt.hasOwnProperty(i)) { + event[i] = evt[i]; + } + } + + event.target = event.rootEl = nearest; + event.preventDefault = void 0; + event.stopPropagation = void 0; + + nearest[expando]._onDragOver(event); + } + } + }; + + var _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) { + if (dragEl) { + dragEl.parentNode[expando]._isOutsideThisEl(evt.target); + } + }; + /** + * @class Sortable + * @param {HTMLElement} el + * @param {Object} [options] + */ + + + function Sortable(el, options) { + if (!(el && el.nodeType && el.nodeType === 1)) { + throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(el)); + } + + this.el = el; // root element + + this.options = options = _extends({}, options); // Export instance + + el[expando] = this; + var defaults = { + group: null, + sort: true, + disabled: false, + store: null, + handle: null, + draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*', + swapThreshold: 1, + // percentage; 0 <= x <= 1 + invertSwap: false, + // invert always + invertedSwapThreshold: null, + // will be set to same as swapThreshold if default + removeCloneOnHide: true, + direction: function direction() { + return _detectDirection(el, this.options); + }, + ghostClass: 'sortable-ghost', + chosenClass: 'sortable-chosen', + dragClass: 'sortable-drag', + ignore: 'a, img', + filter: null, + preventOnFilter: true, + animation: 0, + easing: null, + setData: function setData(dataTransfer, dragEl) { + dataTransfer.setData('Text', dragEl.textContent); + }, + dropBubble: false, + dragoverBubble: false, + dataIdAttr: 'data-id', + delay: 0, + delayOnTouchOnly: false, + touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1, + forceFallback: false, + fallbackClass: 'sortable-fallback', + fallbackOnBody: false, + fallbackTolerance: 0, + fallbackOffset: { + x: 0, + y: 0 + }, + supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window, + emptyInsertThreshold: 5 + }; + PluginManager.initializePlugins(this, el, defaults); // Set default options + + for (var name in defaults) { + !(name in options) && (options[name] = defaults[name]); + } + + _prepareGroup(options); // Bind all private methods + + + for (var fn in this) { + if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { + this[fn] = this[fn].bind(this); + } + } // Setup drag mode + + + this.nativeDraggable = options.forceFallback ? false : supportDraggable; + + if (this.nativeDraggable) { + // Touch start threshold cannot be greater than the native dragstart threshold + this.options.touchStartThreshold = 1; + } // Bind events + + + if (options.supportPointer) { + on(el, 'pointerdown', this._onTapStart); + } else { + on(el, 'mousedown', this._onTapStart); + on(el, 'touchstart', this._onTapStart); + } + + if (this.nativeDraggable) { + on(el, 'dragover', this); + on(el, 'dragenter', this); + } + + sortables.push(this.el); // Restore sorting + + options.store && options.store.get && this.sort(options.store.get(this) || []); // Add animation state manager + + _extends(this, AnimationStateManager()); + } + + Sortable.prototype = + /** @lends Sortable.prototype */ + { + constructor: Sortable, + _isOutsideThisEl: function _isOutsideThisEl(target) { + if (!this.el.contains(target) && target !== this.el) { + lastTarget = null; + } + }, + _getDirection: function _getDirection(evt, target) { + return typeof this.options.direction === 'function' ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction; + }, + _onTapStart: function _onTapStart( + /** Event|TouchEvent */ + evt) { + if (!evt.cancelable) return; + + var _this = this, + el = this.el, + options = this.options, + preventOnFilter = options.preventOnFilter, + type = evt.type, + touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt, + target = (touch || evt).target, + originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target, + filter = options.filter; + + _saveInputCheckedState(el); // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group. + + + if (dragEl) { + return; + } + + if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) { + return; // only left button and enabled + } // cancel dnd if original target is content editable + + + if (originalTarget.isContentEditable) { + return; + } + + target = closest(target, options.draggable, el, false); + + if (target && target.animated) { + return; + } + + if (lastDownEl === target) { + // Ignoring duplicate `down` + return; + } // Get the index of the dragged element within its parent + + + oldIndex = index(target); + oldDraggableIndex = index(target, options.draggable); // Check filter + + if (typeof filter === 'function') { + if (filter.call(this, evt, target, this)) { + _dispatchEvent({ + sortable: _this, + rootEl: originalTarget, + name: 'filter', + targetEl: target, + toEl: el, + fromEl: el + }); + + pluginEvent('filter', _this, { + evt: evt + }); + preventOnFilter && evt.cancelable && evt.preventDefault(); + return; // cancel dnd + } + } else if (filter) { + filter = filter.split(',').some(function (criteria) { + criteria = closest(originalTarget, criteria.trim(), el, false); + + if (criteria) { + _dispatchEvent({ + sortable: _this, + rootEl: criteria, + name: 'filter', + targetEl: target, + fromEl: el, + toEl: el + }); + + pluginEvent('filter', _this, { + evt: evt + }); + return true; + } + }); + + if (filter) { + preventOnFilter && evt.cancelable && evt.preventDefault(); + return; // cancel dnd + } + } + + if (options.handle && !closest(originalTarget, options.handle, el, false)) { + return; + } // Prepare `dragstart` + + + this._prepareDragStart(evt, touch, target); + }, + _prepareDragStart: function _prepareDragStart( + /** Event */ + evt, + /** Touch */ + touch, + /** HTMLElement */ + target) { + var _this = this, + el = _this.el, + options = _this.options, + ownerDocument = el.ownerDocument, + dragStartFn; + + if (target && !dragEl && target.parentNode === el) { + var dragRect = getRect(target); + rootEl = el; + dragEl = target; + parentEl = dragEl.parentNode; + nextEl = dragEl.nextSibling; + lastDownEl = target; + activeGroup = options.group; + Sortable.dragged = dragEl; + tapEvt = { + target: dragEl, + clientX: (touch || evt).clientX, + clientY: (touch || evt).clientY + }; + tapDistanceLeft = tapEvt.clientX - dragRect.left; + tapDistanceTop = tapEvt.clientY - dragRect.top; + this._lastX = (touch || evt).clientX; + this._lastY = (touch || evt).clientY; + dragEl.style['will-change'] = 'all'; + + dragStartFn = function dragStartFn() { + pluginEvent('delayEnded', _this, { + evt: evt + }); + + if (Sortable.eventCanceled) { + _this._onDrop(); + + return; + } // Delayed drag has been triggered + // we can re-enable the events: touchmove/mousemove + + + _this._disableDelayedDragEvents(); + + if (!FireFox && _this.nativeDraggable) { + dragEl.draggable = true; + } // Bind the events: dragstart/dragend + + + _this._triggerDragStart(evt, touch); // Drag start event + + + _dispatchEvent({ + sortable: _this, + name: 'choose', + originalEvent: evt + }); // Chosen item + + + toggleClass(dragEl, options.chosenClass, true); + }; // Disable "draggable" + + + options.ignore.split(',').forEach(function (criteria) { + find(dragEl, criteria.trim(), _disableDraggable); + }); + on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent); + on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent); + on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent); + on(ownerDocument, 'mouseup', _this._onDrop); + on(ownerDocument, 'touchend', _this._onDrop); + on(ownerDocument, 'touchcancel', _this._onDrop); // Make dragEl draggable (must be before delay for FireFox) + + if (FireFox && this.nativeDraggable) { + this.options.touchStartThreshold = 4; + dragEl.draggable = true; + } + + pluginEvent('delayStart', this, { + evt: evt + }); // Delay is impossible for native DnD in Edge or IE + + if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) { + if (Sortable.eventCanceled) { + this._onDrop(); + + return; + } // If the user moves the pointer or let go the click or touch + // before the delay has been reached: + // disable the delayed drag + + + on(ownerDocument, 'mouseup', _this._disableDelayedDrag); + on(ownerDocument, 'touchend', _this._disableDelayedDrag); + on(ownerDocument, 'touchcancel', _this._disableDelayedDrag); + on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler); + on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler); + options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler); + _this._dragStartTimer = setTimeout(dragStartFn, options.delay); + } else { + dragStartFn(); + } + } + }, + _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler( + /** TouchEvent|PointerEvent **/ + e) { + var touch = e.touches ? e.touches[0] : e; + + if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) { + this._disableDelayedDrag(); + } + }, + _disableDelayedDrag: function _disableDelayedDrag() { + dragEl && _disableDraggable(dragEl); + clearTimeout(this._dragStartTimer); + + this._disableDelayedDragEvents(); + }, + _disableDelayedDragEvents: function _disableDelayedDragEvents() { + var ownerDocument = this.el.ownerDocument; + off(ownerDocument, 'mouseup', this._disableDelayedDrag); + off(ownerDocument, 'touchend', this._disableDelayedDrag); + off(ownerDocument, 'touchcancel', this._disableDelayedDrag); + off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler); + off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler); + off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler); + }, + _triggerDragStart: function _triggerDragStart( + /** Event */ + evt, + /** Touch */ + touch) { + touch = touch || evt.pointerType == 'touch' && evt; + + if (!this.nativeDraggable || touch) { + if (this.options.supportPointer) { + on(document, 'pointermove', this._onTouchMove); + } else if (touch) { + on(document, 'touchmove', this._onTouchMove); + } else { + on(document, 'mousemove', this._onTouchMove); + } + } else { + on(dragEl, 'dragend', this); + on(rootEl, 'dragstart', this._onDragStart); + } + + try { + if (document.selection) { + // Timeout neccessary for IE9 + _nextTick(function () { + document.selection.empty(); + }); + } else { + window.getSelection().removeAllRanges(); + } + } catch (err) {} + }, + _dragStarted: function _dragStarted(fallback, evt) { + + awaitingDragStarted = false; + + if (rootEl && dragEl) { + pluginEvent('dragStarted', this, { + evt: evt + }); + + if (this.nativeDraggable) { + on(document, 'dragover', _checkOutsideTargetEl); + } + + var options = this.options; // Apply effect + + !fallback && toggleClass(dragEl, options.dragClass, false); + toggleClass(dragEl, options.ghostClass, true); + Sortable.active = this; + fallback && this._appendGhost(); // Drag start event + + _dispatchEvent({ + sortable: this, + name: 'start', + originalEvent: evt + }); + } else { + this._nulling(); + } + }, + _emulateDragOver: function _emulateDragOver() { + if (touchEvt) { + this._lastX = touchEvt.clientX; + this._lastY = touchEvt.clientY; + + _hideGhostForTarget(); + + var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY); + var parent = target; + + while (target && target.shadowRoot) { + target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY); + if (target === parent) break; + parent = target; + } + + dragEl.parentNode[expando]._isOutsideThisEl(target); + + if (parent) { + do { + if (parent[expando]) { + var inserted = void 0; + inserted = parent[expando]._onDragOver({ + clientX: touchEvt.clientX, + clientY: touchEvt.clientY, + target: target, + rootEl: parent + }); + + if (inserted && !this.options.dragoverBubble) { + break; + } + } + + target = parent; // store last element + } + /* jshint boss:true */ + while (parent = parent.parentNode); + } + + _unhideGhostForTarget(); + } + }, + _onTouchMove: function _onTouchMove( + /**TouchEvent*/ + evt) { + if (tapEvt) { + var options = this.options, + fallbackTolerance = options.fallbackTolerance, + fallbackOffset = options.fallbackOffset, + touch = evt.touches ? evt.touches[0] : evt, + ghostMatrix = ghostEl && matrix(ghostEl, true), + scaleX = ghostEl && ghostMatrix && ghostMatrix.a, + scaleY = ghostEl && ghostMatrix && ghostMatrix.d, + relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent), + dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1), + dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging + + if (!Sortable.active && !awaitingDragStarted) { + if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) { + return; + } + + this._onDragStart(evt, true); + } + + if (ghostEl) { + if (ghostMatrix) { + ghostMatrix.e += dx - (lastDx || 0); + ghostMatrix.f += dy - (lastDy || 0); + } else { + ghostMatrix = { + a: 1, + b: 0, + c: 0, + d: 1, + e: dx, + f: dy + }; + } + + var cssMatrix = "matrix(".concat(ghostMatrix.a, ",").concat(ghostMatrix.b, ",").concat(ghostMatrix.c, ",").concat(ghostMatrix.d, ",").concat(ghostMatrix.e, ",").concat(ghostMatrix.f, ")"); + css(ghostEl, 'webkitTransform', cssMatrix); + css(ghostEl, 'mozTransform', cssMatrix); + css(ghostEl, 'msTransform', cssMatrix); + css(ghostEl, 'transform', cssMatrix); + lastDx = dx; + lastDy = dy; + touchEvt = touch; + } + + evt.cancelable && evt.preventDefault(); + } + }, + _appendGhost: function _appendGhost() { + // Bug if using scale(): https://stackoverflow.com/questions/2637058 + // Not being adjusted for + if (!ghostEl) { + var container = this.options.fallbackOnBody ? document.body : rootEl, + rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container), + options = this.options; // Position absolutely + + if (PositionGhostAbsolutely) { + // Get relatively positioned parent + ghostRelativeParent = container; + + while (css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) { + ghostRelativeParent = ghostRelativeParent.parentNode; + } + + if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) { + if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement(); + rect.top += ghostRelativeParent.scrollTop; + rect.left += ghostRelativeParent.scrollLeft; + } else { + ghostRelativeParent = getWindowScrollingElement(); + } + + ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent); + } + + ghostEl = dragEl.cloneNode(true); + toggleClass(ghostEl, options.ghostClass, false); + toggleClass(ghostEl, options.fallbackClass, true); + toggleClass(ghostEl, options.dragClass, true); + css(ghostEl, 'transition', ''); + css(ghostEl, 'transform', ''); + css(ghostEl, 'box-sizing', 'border-box'); + css(ghostEl, 'margin', 0); + css(ghostEl, 'top', rect.top); + css(ghostEl, 'left', rect.left); + css(ghostEl, 'width', rect.width); + css(ghostEl, 'height', rect.height); + css(ghostEl, 'opacity', '0.8'); + css(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed'); + css(ghostEl, 'zIndex', '100000'); + css(ghostEl, 'pointerEvents', 'none'); + Sortable.ghost = ghostEl; + container.appendChild(ghostEl); // Set transform-origin + + css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%'); + } + }, + _onDragStart: function _onDragStart( + /**Event*/ + evt, + /**boolean*/ + fallback) { + var _this = this; + + var dataTransfer = evt.dataTransfer; + var options = _this.options; + pluginEvent('dragStart', this, { + evt: evt + }); + + if (Sortable.eventCanceled) { + this._onDrop(); + + return; + } + + pluginEvent('setupClone', this); + + if (!Sortable.eventCanceled) { + cloneEl = clone(dragEl); + cloneEl.draggable = false; + cloneEl.style['will-change'] = ''; + + this._hideClone(); + + toggleClass(cloneEl, this.options.chosenClass, false); + Sortable.clone = cloneEl; + } // #1143: IFrame support workaround + + + _this.cloneId = _nextTick(function () { + pluginEvent('clone', _this); + if (Sortable.eventCanceled) return; + + if (!_this.options.removeCloneOnHide) { + rootEl.insertBefore(cloneEl, dragEl); + } + + _this._hideClone(); + + _dispatchEvent({ + sortable: _this, + name: 'clone' + }); + }); + !fallback && toggleClass(dragEl, options.dragClass, true); // Set proper drop events + + if (fallback) { + ignoreNextClick = true; + _this._loopId = setInterval(_this._emulateDragOver, 50); + } else { + // Undo what was set in _prepareDragStart before drag started + off(document, 'mouseup', _this._onDrop); + off(document, 'touchend', _this._onDrop); + off(document, 'touchcancel', _this._onDrop); + + if (dataTransfer) { + dataTransfer.effectAllowed = 'move'; + options.setData && options.setData.call(_this, dataTransfer, dragEl); + } + + on(document, 'drop', _this); // #1276 fix: + + css(dragEl, 'transform', 'translateZ(0)'); + } + + awaitingDragStarted = true; + _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt)); + on(document, 'selectstart', _this); + moved = true; + + if (Safari) { + css(document.body, 'user-select', 'none'); + } + }, + // Returns true - if no further action is needed (either inserted or another condition) + _onDragOver: function _onDragOver( + /**Event*/ + evt) { + var el = this.el, + target = evt.target, + dragRect, + targetRect, + revert, + options = this.options, + group = options.group, + activeSortable = Sortable.active, + isOwner = activeGroup === group, + canSort = options.sort, + fromSortable = putSortable || activeSortable, + vertical, + _this = this, + completedFired = false; + + if (_silent) return; + + function dragOverEvent(name, extra) { + pluginEvent(name, _this, _objectSpread({ + evt: evt, + isOwner: isOwner, + axis: vertical ? 'vertical' : 'horizontal', + revert: revert, + dragRect: dragRect, + targetRect: targetRect, + canSort: canSort, + fromSortable: fromSortable, + target: target, + completed: completed, + onMove: function onMove(target, after) { + return _onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after); + }, + changed: changed + }, extra)); + } // Capture animation state + + + function capture() { + dragOverEvent('dragOverAnimationCapture'); + + _this.captureAnimationState(); + + if (_this !== fromSortable) { + fromSortable.captureAnimationState(); + } + } // Return invocation when dragEl is inserted (or completed) + + + function completed(insertion) { + dragOverEvent('dragOverCompleted', { + insertion: insertion + }); + + if (insertion) { + // Clones must be hidden before folding animation to capture dragRectAbsolute properly + if (isOwner) { + activeSortable._hideClone(); + } else { + activeSortable._showClone(_this); + } + + if (_this !== fromSortable) { + // Set ghost class to new sortable's ghost class + toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false); + toggleClass(dragEl, options.ghostClass, true); + } + + if (putSortable !== _this && _this !== Sortable.active) { + putSortable = _this; + } else if (_this === Sortable.active && putSortable) { + putSortable = null; + } // Animation + + + if (fromSortable === _this) { + _this._ignoreWhileAnimating = target; + } + + _this.animateAll(function () { + dragOverEvent('dragOverAnimationComplete'); + _this._ignoreWhileAnimating = null; + }); + + if (_this !== fromSortable) { + fromSortable.animateAll(); + fromSortable._ignoreWhileAnimating = null; + } + } // Null lastTarget if it is not inside a previously swapped element + + + if (target === dragEl && !dragEl.animated || target === el && !target.animated) { + lastTarget = null; + } // no bubbling and not fallback + + + if (!options.dragoverBubble && !evt.rootEl && target !== document) { + dragEl.parentNode[expando]._isOutsideThisEl(evt.target); // Do not detect for empty insert if already inserted + + + !insertion && nearestEmptyInsertDetectEvent(evt); + } + + !options.dragoverBubble && evt.stopPropagation && evt.stopPropagation(); + return completedFired = true; + } // Call when dragEl has been inserted + + + function changed() { + newIndex = index(dragEl); + newDraggableIndex = index(dragEl, options.draggable); + + _dispatchEvent({ + sortable: _this, + name: 'change', + toEl: el, + newIndex: newIndex, + newDraggableIndex: newDraggableIndex, + originalEvent: evt + }); + } + + if (evt.preventDefault !== void 0) { + evt.cancelable && evt.preventDefault(); + } + + target = closest(target, options.draggable, el, true); + dragOverEvent('dragOver'); + if (Sortable.eventCanceled) return completedFired; + + if (dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target) { + return completed(false); + } + + ignoreNextClick = false; + + if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = !rootEl.contains(dragEl)) // Reverting item into the original list + : putSortable === this || (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt))) { + vertical = this._getDirection(evt, target) === 'vertical'; + dragRect = getRect(dragEl); + dragOverEvent('dragOverValid'); + if (Sortable.eventCanceled) return completedFired; + + if (revert) { + parentEl = rootEl; // actualization + + capture(); + + this._hideClone(); + + dragOverEvent('revert'); + + if (!Sortable.eventCanceled) { + if (nextEl) { + rootEl.insertBefore(dragEl, nextEl); + } else { + rootEl.appendChild(dragEl); + } + } + + return completed(true); + } + + var elLastChild = lastChild(el, options.draggable); + + if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) { + // If already at end of list: Do not insert + if (elLastChild === dragEl) { + return completed(false); + } // assign target only if condition is true + + + if (elLastChild && el === evt.target) { + target = elLastChild; + } + + if (target) { + targetRect = getRect(target); + } + + if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) { + capture(); + el.appendChild(dragEl); + parentEl = el; // actualization + + changed(); + return completed(true); + } + } else if (target.parentNode === el) { + targetRect = getRect(target); + var direction = 0, + targetBeforeFirstSwap, + differentLevel = dragEl.parentNode !== el, + differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical), + side1 = vertical ? 'top' : 'left', + scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'), + scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0; + + if (lastTarget !== target) { + targetBeforeFirstSwap = targetRect[side1]; + pastFirstInvertThresh = false; + isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel; + } + + direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target); + var sibling; + + if (direction !== 0) { + // Check if target is beside dragEl in respective direction (ignoring hidden elements) + var dragIndex = index(dragEl); + + do { + dragIndex -= direction; + sibling = parentEl.children[dragIndex]; + } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl)); + } // If dragEl is already beside target: Do not insert + + + if (direction === 0 || sibling === target) { + return completed(false); + } + + lastTarget = target; + lastDirection = direction; + var nextSibling = target.nextElementSibling, + after = false; + after = direction === 1; + + var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after); + + if (moveVector !== false) { + if (moveVector === 1 || moveVector === -1) { + after = moveVector === 1; + } + + _silent = true; + setTimeout(_unsilent, 30); + capture(); + + if (after && !nextSibling) { + el.appendChild(dragEl); + } else { + target.parentNode.insertBefore(dragEl, after ? nextSibling : target); + } // Undo chrome's scroll adjustment (has no effect on other browsers) + + + if (scrolledPastTop) { + scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop); + } + + parentEl = dragEl.parentNode; // actualization + // must be done before animation + + if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) { + targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]); + } + + changed(); + return completed(true); + } + } + + if (el.contains(dragEl)) { + return completed(false); + } + } + + return false; + }, + _ignoreWhileAnimating: null, + _offMoveEvents: function _offMoveEvents() { + off(document, 'mousemove', this._onTouchMove); + off(document, 'touchmove', this._onTouchMove); + off(document, 'pointermove', this._onTouchMove); + off(document, 'dragover', nearestEmptyInsertDetectEvent); + off(document, 'mousemove', nearestEmptyInsertDetectEvent); + off(document, 'touchmove', nearestEmptyInsertDetectEvent); + }, + _offUpEvents: function _offUpEvents() { + var ownerDocument = this.el.ownerDocument; + off(ownerDocument, 'mouseup', this._onDrop); + off(ownerDocument, 'touchend', this._onDrop); + off(ownerDocument, 'pointerup', this._onDrop); + off(ownerDocument, 'touchcancel', this._onDrop); + off(document, 'selectstart', this); + }, + _onDrop: function _onDrop( + /**Event*/ + evt) { + var el = this.el, + options = this.options; // Get the index of the dragged element within its parent + + newIndex = index(dragEl); + newDraggableIndex = index(dragEl, options.draggable); + pluginEvent('drop', this, { + evt: evt + }); + parentEl = dragEl && dragEl.parentNode; // Get again after plugin event + + newIndex = index(dragEl); + newDraggableIndex = index(dragEl, options.draggable); + + if (Sortable.eventCanceled) { + this._nulling(); + + return; + } + + awaitingDragStarted = false; + isCircumstantialInvert = false; + pastFirstInvertThresh = false; + clearInterval(this._loopId); + clearTimeout(this._dragStartTimer); + + _cancelNextTick(this.cloneId); + + _cancelNextTick(this._dragStartId); // Unbind events + + + if (this.nativeDraggable) { + off(document, 'drop', this); + off(el, 'dragstart', this._onDragStart); + } + + this._offMoveEvents(); + + this._offUpEvents(); + + if (Safari) { + css(document.body, 'user-select', ''); + } + + css(dragEl, 'transform', ''); + + if (evt) { + if (moved) { + evt.cancelable && evt.preventDefault(); + !options.dropBubble && evt.stopPropagation(); + } + + ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl); + + if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { + // Remove clone(s) + cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl); + } + + if (dragEl) { + if (this.nativeDraggable) { + off(dragEl, 'dragend', this); + } + + _disableDraggable(dragEl); + + dragEl.style['will-change'] = ''; // Remove classes + // ghostClass is added in dragStarted + + if (moved && !awaitingDragStarted) { + toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false); + } + + toggleClass(dragEl, this.options.chosenClass, false); // Drag stop event + + _dispatchEvent({ + sortable: this, + name: 'unchoose', + toEl: parentEl, + newIndex: null, + newDraggableIndex: null, + originalEvent: evt + }); + + if (rootEl !== parentEl) { + if (newIndex >= 0) { + // Add event + _dispatchEvent({ + rootEl: parentEl, + name: 'add', + toEl: parentEl, + fromEl: rootEl, + originalEvent: evt + }); // Remove event + + + _dispatchEvent({ + sortable: this, + name: 'remove', + toEl: parentEl, + originalEvent: evt + }); // drag from one list and drop into another + + + _dispatchEvent({ + rootEl: parentEl, + name: 'sort', + toEl: parentEl, + fromEl: rootEl, + originalEvent: evt + }); + + _dispatchEvent({ + sortable: this, + name: 'sort', + toEl: parentEl, + originalEvent: evt + }); + } + + putSortable && putSortable.save(); + } else { + if (newIndex !== oldIndex) { + if (newIndex >= 0) { + // drag & drop within the same list + _dispatchEvent({ + sortable: this, + name: 'update', + toEl: parentEl, + originalEvent: evt + }); + + _dispatchEvent({ + sortable: this, + name: 'sort', + toEl: parentEl, + originalEvent: evt + }); + } + } + } + + if (Sortable.active) { + /* jshint eqnull:true */ + if (newIndex == null || newIndex === -1) { + newIndex = oldIndex; + newDraggableIndex = oldDraggableIndex; + } + + _dispatchEvent({ + sortable: this, + name: 'end', + toEl: parentEl, + originalEvent: evt + }); // Save sorting + + + this.save(); + } + } + } + + this._nulling(); + }, + _nulling: function _nulling() { + pluginEvent('nulling', this); + rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null; + savedInputChecked.forEach(function (el) { + el.checked = true; + }); + savedInputChecked.length = lastDx = lastDy = 0; + }, + handleEvent: function handleEvent( + /**Event*/ + evt) { + switch (evt.type) { + case 'drop': + case 'dragend': + this._onDrop(evt); + + break; + + case 'dragenter': + case 'dragover': + if (dragEl) { + this._onDragOver(evt); + + _globalDragOver(evt); + } + + break; + + case 'selectstart': + evt.preventDefault(); + break; + } + }, + + /** + * Serializes the item into an array of string. + * @returns {String[]} + */ + toArray: function toArray() { + var order = [], + el, + children = this.el.children, + i = 0, + n = children.length, + options = this.options; + + for (; i < n; i++) { + el = children[i]; + + if (closest(el, options.draggable, this.el, false)) { + order.push(el.getAttribute(options.dataIdAttr) || _generateId(el)); + } + } + + return order; + }, + + /** + * Sorts the elements according to the array. + * @param {String[]} order order of the items + */ + sort: function sort(order) { + var items = {}, + rootEl = this.el; + this.toArray().forEach(function (id, i) { + var el = rootEl.children[i]; + + if (closest(el, this.options.draggable, rootEl, false)) { + items[id] = el; + } + }, this); + order.forEach(function (id) { + if (items[id]) { + rootEl.removeChild(items[id]); + rootEl.appendChild(items[id]); + } + }); + }, + + /** + * Save the current sorting + */ + save: function save() { + var store = this.options.store; + store && store.set && store.set(this); + }, + + /** + * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree. + * @param {HTMLElement} el + * @param {String} [selector] default: `options.draggable` + * @returns {HTMLElement|null} + */ + closest: function closest$1(el, selector) { + return closest(el, selector || this.options.draggable, this.el, false); + }, + + /** + * Set/get option + * @param {string} name + * @param {*} [value] + * @returns {*} + */ + option: function option(name, value) { + var options = this.options; + + if (value === void 0) { + return options[name]; + } else { + var modifiedValue = PluginManager.modifyOption(this, name, value); + + if (typeof modifiedValue !== 'undefined') { + options[name] = modifiedValue; + } else { + options[name] = value; + } + + if (name === 'group') { + _prepareGroup(options); + } + } + }, + + /** + * Destroy + */ + destroy: function destroy() { + pluginEvent('destroy', this); + var el = this.el; + el[expando] = null; + off(el, 'mousedown', this._onTapStart); + off(el, 'touchstart', this._onTapStart); + off(el, 'pointerdown', this._onTapStart); + + if (this.nativeDraggable) { + off(el, 'dragover', this); + off(el, 'dragenter', this); + } // Remove draggable attributes + + + Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) { + el.removeAttribute('draggable'); + }); + + this._onDrop(); + + this._disableDelayedDragEvents(); + + sortables.splice(sortables.indexOf(this.el), 1); + this.el = el = null; + }, + _hideClone: function _hideClone() { + if (!cloneHidden) { + pluginEvent('hideClone', this); + if (Sortable.eventCanceled) return; + css(cloneEl, 'display', 'none'); + + if (this.options.removeCloneOnHide && cloneEl.parentNode) { + cloneEl.parentNode.removeChild(cloneEl); + } + + cloneHidden = true; + } + }, + _showClone: function _showClone(putSortable) { + if (putSortable.lastPutMode !== 'clone') { + this._hideClone(); + + return; + } + + if (cloneHidden) { + pluginEvent('showClone', this); + if (Sortable.eventCanceled) return; // show clone at dragEl or original position + + if (rootEl.contains(dragEl) && !this.options.group.revertClone) { + rootEl.insertBefore(cloneEl, dragEl); + } else if (nextEl) { + rootEl.insertBefore(cloneEl, nextEl); + } else { + rootEl.appendChild(cloneEl); + } + + if (this.options.group.revertClone) { + this.animate(dragEl, cloneEl); + } + + css(cloneEl, 'display', ''); + cloneHidden = false; + } + } + }; + + function _globalDragOver( + /**Event*/ + evt) { + if (evt.dataTransfer) { + evt.dataTransfer.dropEffect = 'move'; + } + + evt.cancelable && evt.preventDefault(); + } + + function _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) { + var evt, + sortable = fromEl[expando], + onMoveFn = sortable.options.onMove, + retVal; // Support for new CustomEvent feature + + if (window.CustomEvent && !IE11OrLess && !Edge) { + evt = new CustomEvent('move', { + bubbles: true, + cancelable: true + }); + } else { + evt = document.createEvent('Event'); + evt.initEvent('move', true, true); + } + + evt.to = toEl; + evt.from = fromEl; + evt.dragged = dragEl; + evt.draggedRect = dragRect; + evt.related = targetEl || toEl; + evt.relatedRect = targetRect || getRect(toEl); + evt.willInsertAfter = willInsertAfter; + evt.originalEvent = originalEvent; + fromEl.dispatchEvent(evt); + + if (onMoveFn) { + retVal = onMoveFn.call(sortable, evt, originalEvent); + } + + return retVal; + } + + function _disableDraggable(el) { + el.draggable = false; + } + + function _unsilent() { + _silent = false; + } + + function _ghostIsLast(evt, vertical, sortable) { + var rect = getRect(lastChild(sortable.el, sortable.options.draggable)); + var spacer = 10; + return vertical ? evt.clientX > rect.right + spacer || evt.clientX <= rect.right && evt.clientY > rect.bottom && evt.clientX >= rect.left : evt.clientX > rect.right && evt.clientY > rect.top || evt.clientX <= rect.right && evt.clientY > rect.bottom + spacer; + } + + function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) { + var mouseOnAxis = vertical ? evt.clientY : evt.clientX, + targetLength = vertical ? targetRect.height : targetRect.width, + targetS1 = vertical ? targetRect.top : targetRect.left, + targetS2 = vertical ? targetRect.bottom : targetRect.right, + invert = false; + + if (!invertSwap) { + // Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold + if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) { + // multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2 + // check if past first invert threshold on side opposite of lastDirection + if (!pastFirstInvertThresh && (lastDirection === 1 ? mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 : mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2)) { + // past first invert threshold, do not restrict inverted threshold to dragEl shadow + pastFirstInvertThresh = true; + } + + if (!pastFirstInvertThresh) { + // dragEl shadow (target move distance shadow) + if (lastDirection === 1 ? mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow + : mouseOnAxis > targetS2 - targetMoveDistance) { + return -lastDirection; + } + } else { + invert = true; + } + } else { + // Regular + if (mouseOnAxis > targetS1 + targetLength * (1 - swapThreshold) / 2 && mouseOnAxis < targetS2 - targetLength * (1 - swapThreshold) / 2) { + return _getInsertDirection(target); + } + } + } + + invert = invert || invertSwap; + + if (invert) { + // Invert of regular + if (mouseOnAxis < targetS1 + targetLength * invertedSwapThreshold / 2 || mouseOnAxis > targetS2 - targetLength * invertedSwapThreshold / 2) { + return mouseOnAxis > targetS1 + targetLength / 2 ? 1 : -1; + } + } + + return 0; + } + /** + * Gets the direction dragEl must be swapped relative to target in order to make it + * seem that dragEl has been "inserted" into that element's position + * @param {HTMLElement} target The target whose position dragEl is being inserted at + * @return {Number} Direction dragEl must be swapped + */ + + + function _getInsertDirection(target) { + if (index(dragEl) < index(target)) { + return 1; + } else { + return -1; + } + } + /** + * Generate id + * @param {HTMLElement} el + * @returns {String} + * @private + */ + + + function _generateId(el) { + var str = el.tagName + el.className + el.src + el.href + el.textContent, + i = str.length, + sum = 0; + + while (i--) { + sum += str.charCodeAt(i); + } + + return sum.toString(36); + } + + function _saveInputCheckedState(root) { + savedInputChecked.length = 0; + var inputs = root.getElementsByTagName('input'); + var idx = inputs.length; + + while (idx--) { + var el = inputs[idx]; + el.checked && savedInputChecked.push(el); + } + } + + function _nextTick(fn) { + return setTimeout(fn, 0); + } + + function _cancelNextTick(id) { + return clearTimeout(id); + } // Fixed #973: + + + if (documentExists) { + on(document, 'touchmove', function (evt) { + if ((Sortable.active || awaitingDragStarted) && evt.cancelable) { + evt.preventDefault(); + } + }); + } // Export utils + + + Sortable.utils = { + on: on, + off: off, + css: css, + find: find, + is: function is(el, selector) { + return !!closest(el, selector, el, false); + }, + extend: extend, + throttle: throttle, + closest: closest, + toggleClass: toggleClass, + clone: clone, + index: index, + nextTick: _nextTick, + cancelNextTick: _cancelNextTick, + detectDirection: _detectDirection, + getChild: getChild + }; + /** + * Get the Sortable instance of an element + * @param {HTMLElement} element The element + * @return {Sortable|undefined} The instance of Sortable + */ + + Sortable.get = function (element) { + return element[expando]; + }; + /** + * Mount a plugin to Sortable + * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted + */ + + + Sortable.mount = function () { + for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) { + plugins[_key] = arguments[_key]; + } + + if (plugins[0].constructor === Array) plugins = plugins[0]; + plugins.forEach(function (plugin) { + if (!plugin.prototype || !plugin.prototype.constructor) { + throw "Sortable: Mounted plugin must be a constructor function, not ".concat({}.toString.call(plugin)); + } + + if (plugin.utils) Sortable.utils = _objectSpread({}, Sortable.utils, plugin.utils); + PluginManager.mount(plugin); + }); + }; + /** + * Create sortable instance + * @param {HTMLElement} el + * @param {Object} [options] + */ + + + Sortable.create = function (el, options) { + return new Sortable(el, options); + }; // Export + + + Sortable.version = version; + + var autoScrolls = [], + scrollEl, + scrollRootEl, + scrolling = false, + lastAutoScrollX, + lastAutoScrollY, + touchEvt$1, + pointerElemChangedInterval; + + function AutoScrollPlugin() { + function AutoScroll() { + this.defaults = { + scroll: true, + scrollSensitivity: 30, + scrollSpeed: 10, + bubbleScroll: true + }; // Bind all private methods + + for (var fn in this) { + if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { + this[fn] = this[fn].bind(this); + } + } + } + + AutoScroll.prototype = { + dragStarted: function dragStarted(_ref) { + var originalEvent = _ref.originalEvent; + + if (this.sortable.nativeDraggable) { + on(document, 'dragover', this._handleAutoScroll); + } else { + if (this.options.supportPointer) { + on(document, 'pointermove', this._handleFallbackAutoScroll); + } else if (originalEvent.touches) { + on(document, 'touchmove', this._handleFallbackAutoScroll); + } else { + on(document, 'mousemove', this._handleFallbackAutoScroll); + } + } + }, + dragOverCompleted: function dragOverCompleted(_ref2) { + var originalEvent = _ref2.originalEvent; + + // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached) + if (!this.options.dragOverBubble && !originalEvent.rootEl) { + this._handleAutoScroll(originalEvent); + } + }, + drop: function drop() { + if (this.sortable.nativeDraggable) { + off(document, 'dragover', this._handleAutoScroll); + } else { + off(document, 'pointermove', this._handleFallbackAutoScroll); + off(document, 'touchmove', this._handleFallbackAutoScroll); + off(document, 'mousemove', this._handleFallbackAutoScroll); + } + + clearPointerElemChangedInterval(); + clearAutoScrolls(); + cancelThrottle(); + }, + nulling: function nulling() { + touchEvt$1 = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null; + autoScrolls.length = 0; + }, + _handleFallbackAutoScroll: function _handleFallbackAutoScroll(evt) { + this._handleAutoScroll(evt, true); + }, + _handleAutoScroll: function _handleAutoScroll(evt, fallback) { + var _this = this; + + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, + elem = document.elementFromPoint(x, y); + touchEvt$1 = evt; // IE does not seem to have native autoscroll, + // Edge's autoscroll seems too conditional, + // MACOS Safari does not have autoscroll, + // Firefox and Chrome are good + + if (fallback || Edge || IE11OrLess || Safari) { + autoScroll(evt, this.options, elem, fallback); // Listener for pointer element change + + var ogElemScroller = getParentAutoScrollElement(elem, true); + + if (scrolling && (!pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY)) { + pointerElemChangedInterval && clearPointerElemChangedInterval(); // Detect for pointer elem change, emulating native DnD behaviour + + pointerElemChangedInterval = setInterval(function () { + var newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true); + + if (newElem !== ogElemScroller) { + ogElemScroller = newElem; + clearAutoScrolls(); + } + + autoScroll(evt, _this.options, newElem, fallback); + }, 10); + lastAutoScrollX = x; + lastAutoScrollY = y; + } + } else { + // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll + if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) { + clearAutoScrolls(); + return; + } + + autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false); + } + } + }; + return _extends(AutoScroll, { + pluginName: 'scroll', + initializeByDefault: true + }); + } + + function clearAutoScrolls() { + autoScrolls.forEach(function (autoScroll) { + clearInterval(autoScroll.pid); + }); + autoScrolls = []; + } + + function clearPointerElemChangedInterval() { + clearInterval(pointerElemChangedInterval); + } + + var autoScroll = throttle(function (evt, options, rootEl, isFallback) { + // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521 + if (!options.scroll) return; + var x = (evt.touches ? evt.touches[0] : evt).clientX, + y = (evt.touches ? evt.touches[0] : evt).clientY, + sens = options.scrollSensitivity, + speed = options.scrollSpeed, + winScroller = getWindowScrollingElement(); + var scrollThisInstance = false, + scrollCustomFn; // New scroll root, set scrollEl + + if (scrollRootEl !== rootEl) { + scrollRootEl = rootEl; + clearAutoScrolls(); + scrollEl = options.scroll; + scrollCustomFn = options.scrollFn; + + if (scrollEl === true) { + scrollEl = getParentAutoScrollElement(rootEl, true); + } + } + + var layersOut = 0; + var currentParent = scrollEl; + + do { + var el = currentParent, + rect = getRect(el), + top = rect.top, + bottom = rect.bottom, + left = rect.left, + right = rect.right, + width = rect.width, + height = rect.height, + canScrollX = void 0, + canScrollY = void 0, + scrollWidth = el.scrollWidth, + scrollHeight = el.scrollHeight, + elCSS = css(el), + scrollPosX = el.scrollLeft, + scrollPosY = el.scrollTop; + + if (el === winScroller) { + canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible'); + canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible'); + } else { + canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll'); + canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll'); + } + + var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX); + var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY); + + if (!autoScrolls[layersOut]) { + for (var i = 0; i <= layersOut; i++) { + if (!autoScrolls[i]) { + autoScrolls[i] = {}; + } + } + } + + if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) { + autoScrolls[layersOut].el = el; + autoScrolls[layersOut].vx = vx; + autoScrolls[layersOut].vy = vy; + clearInterval(autoScrolls[layersOut].pid); + + if (vx != 0 || vy != 0) { + scrollThisInstance = true; + /* jshint loopfunc:true */ + + autoScrolls[layersOut].pid = setInterval(function () { + // emulate drag over during autoscroll (fallback), emulating native DnD behaviour + if (isFallback && this.layer === 0) { + Sortable.active._onTouchMove(touchEvt$1); // To move ghost if it is positioned absolutely + + } + + var scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0; + var scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0; + + if (typeof scrollCustomFn === 'function') { + if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt$1, autoScrolls[this.layer].el) !== 'continue') { + return; + } + } + + scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY); + }.bind({ + layer: layersOut + }), 24); + } + } + + layersOut++; + } while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false))); + + scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not + }, 30); + + var drop = function drop(_ref) { + var originalEvent = _ref.originalEvent, + putSortable = _ref.putSortable, + dragEl = _ref.dragEl, + activeSortable = _ref.activeSortable, + dispatchSortableEvent = _ref.dispatchSortableEvent, + hideGhostForTarget = _ref.hideGhostForTarget, + unhideGhostForTarget = _ref.unhideGhostForTarget; + if (!originalEvent) return; + var toSortable = putSortable || activeSortable; + hideGhostForTarget(); + var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent; + var target = document.elementFromPoint(touch.clientX, touch.clientY); + unhideGhostForTarget(); + + if (toSortable && !toSortable.el.contains(target)) { + dispatchSortableEvent('spill'); + this.onSpill({ + dragEl: dragEl, + putSortable: putSortable + }); + } + }; + + function Revert() {} + + Revert.prototype = { + startIndex: null, + dragStart: function dragStart(_ref2) { + var oldDraggableIndex = _ref2.oldDraggableIndex; + this.startIndex = oldDraggableIndex; + }, + onSpill: function onSpill(_ref3) { + var dragEl = _ref3.dragEl, + putSortable = _ref3.putSortable; + this.sortable.captureAnimationState(); + + if (putSortable) { + putSortable.captureAnimationState(); + } + + var nextSibling = getChild(this.sortable.el, this.startIndex, this.options); + + if (nextSibling) { + this.sortable.el.insertBefore(dragEl, nextSibling); + } else { + this.sortable.el.appendChild(dragEl); + } + + this.sortable.animateAll(); + + if (putSortable) { + putSortable.animateAll(); + } + }, + drop: drop + }; + + _extends(Revert, { + pluginName: 'revertOnSpill' + }); + + function Remove() {} + + Remove.prototype = { + onSpill: function onSpill(_ref4) { + var dragEl = _ref4.dragEl, + putSortable = _ref4.putSortable; + var parentSortable = putSortable || this.sortable; + parentSortable.captureAnimationState(); + dragEl.parentNode && dragEl.parentNode.removeChild(dragEl); + parentSortable.animateAll(); + }, + drop: drop + }; + + _extends(Remove, { + pluginName: 'removeOnSpill' + }); + + var lastSwapEl; + + function SwapPlugin() { + function Swap() { + this.defaults = { + swapClass: 'sortable-swap-highlight' + }; + } + + Swap.prototype = { + dragStart: function dragStart(_ref) { + var dragEl = _ref.dragEl; + lastSwapEl = dragEl; + }, + dragOverValid: function dragOverValid(_ref2) { + var completed = _ref2.completed, + target = _ref2.target, + onMove = _ref2.onMove, + activeSortable = _ref2.activeSortable, + changed = _ref2.changed, + cancel = _ref2.cancel; + if (!activeSortable.options.swap) return; + var el = this.sortable.el, + options = this.options; + + if (target && target !== el) { + var prevSwapEl = lastSwapEl; + + if (onMove(target) !== false) { + toggleClass(target, options.swapClass, true); + lastSwapEl = target; + } else { + lastSwapEl = null; + } + + if (prevSwapEl && prevSwapEl !== lastSwapEl) { + toggleClass(prevSwapEl, options.swapClass, false); + } + } + + changed(); + completed(true); + cancel(); + }, + drop: function drop(_ref3) { + var activeSortable = _ref3.activeSortable, + putSortable = _ref3.putSortable, + dragEl = _ref3.dragEl; + var toSortable = putSortable || this.sortable; + var options = this.options; + lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false); + + if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) { + if (dragEl !== lastSwapEl) { + toSortable.captureAnimationState(); + if (toSortable !== activeSortable) activeSortable.captureAnimationState(); + swapNodes(dragEl, lastSwapEl); + toSortable.animateAll(); + if (toSortable !== activeSortable) activeSortable.animateAll(); + } + } + }, + nulling: function nulling() { + lastSwapEl = null; + } + }; + return _extends(Swap, { + pluginName: 'swap', + eventProperties: function eventProperties() { + return { + swapItem: lastSwapEl + }; + } + }); + } + + function swapNodes(n1, n2) { + var p1 = n1.parentNode, + p2 = n2.parentNode, + i1, + i2; + if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return; + i1 = index(n1); + i2 = index(n2); + + if (p1.isEqualNode(p2) && i1 < i2) { + i2++; + } + + p1.insertBefore(n2, p1.children[i1]); + p2.insertBefore(n1, p2.children[i2]); + } + + var multiDragElements = [], + multiDragClones = [], + lastMultiDragSelect, + // for selection with modifier key down (SHIFT) + multiDragSortable, + initialFolding = false, + // Initial multi-drag fold when drag started + folding = false, + // Folding any other time + dragStarted = false, + dragEl$1, + clonesFromRect, + clonesHidden; + + function MultiDragPlugin() { + function MultiDrag(sortable) { + // Bind all private methods + for (var fn in this) { + if (fn.charAt(0) === '_' && typeof this[fn] === 'function') { + this[fn] = this[fn].bind(this); + } + } + + if (sortable.options.supportPointer) { + on(document, 'pointerup', this._deselectMultiDrag); + } else { + on(document, 'mouseup', this._deselectMultiDrag); + on(document, 'touchend', this._deselectMultiDrag); + } + + on(document, 'keydown', this._checkKeyDown); + on(document, 'keyup', this._checkKeyUp); + this.defaults = { + selectedClass: 'sortable-selected', + multiDragKey: null, + setData: function setData(dataTransfer, dragEl) { + var data = ''; + + if (multiDragElements.length && multiDragSortable === sortable) { + multiDragElements.forEach(function (multiDragElement, i) { + data += (!i ? '' : ', ') + multiDragElement.textContent; + }); + } else { + data = dragEl.textContent; + } + + dataTransfer.setData('Text', data); + } + }; + } + + MultiDrag.prototype = { + multiDragKeyDown: false, + isMultiDrag: false, + delayStartGlobal: function delayStartGlobal(_ref) { + var dragged = _ref.dragEl; + dragEl$1 = dragged; + }, + delayEnded: function delayEnded() { + this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1); + }, + setupClone: function setupClone(_ref2) { + var sortable = _ref2.sortable, + cancel = _ref2.cancel; + if (!this.isMultiDrag) return; + + for (var i = 0; i < multiDragElements.length; i++) { + multiDragClones.push(clone(multiDragElements[i])); + multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex; + multiDragClones[i].draggable = false; + multiDragClones[i].style['will-change'] = ''; + toggleClass(multiDragClones[i], this.options.selectedClass, false); + multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false); + } + + sortable._hideClone(); + + cancel(); + }, + clone: function clone(_ref3) { + var sortable = _ref3.sortable, + rootEl = _ref3.rootEl, + dispatchSortableEvent = _ref3.dispatchSortableEvent, + cancel = _ref3.cancel; + if (!this.isMultiDrag) return; + + if (!this.options.removeCloneOnHide) { + if (multiDragElements.length && multiDragSortable === sortable) { + insertMultiDragClones(true, rootEl); + dispatchSortableEvent('clone'); + cancel(); + } + } + }, + showClone: function showClone(_ref4) { + var cloneNowShown = _ref4.cloneNowShown, + rootEl = _ref4.rootEl, + cancel = _ref4.cancel; + if (!this.isMultiDrag) return; + insertMultiDragClones(false, rootEl); + multiDragClones.forEach(function (clone) { + css(clone, 'display', ''); + }); + cloneNowShown(); + clonesHidden = false; + cancel(); + }, + hideClone: function hideClone(_ref5) { + var _this = this; + + var sortable = _ref5.sortable, + cloneNowHidden = _ref5.cloneNowHidden, + cancel = _ref5.cancel; + if (!this.isMultiDrag) return; + multiDragClones.forEach(function (clone) { + css(clone, 'display', 'none'); + + if (_this.options.removeCloneOnHide && clone.parentNode) { + clone.parentNode.removeChild(clone); + } + }); + cloneNowHidden(); + clonesHidden = true; + cancel(); + }, + dragStartGlobal: function dragStartGlobal(_ref6) { + var sortable = _ref6.sortable; + + if (!this.isMultiDrag && multiDragSortable) { + multiDragSortable.multiDrag._deselectMultiDrag(); + } + + multiDragElements.forEach(function (multiDragElement) { + multiDragElement.sortableIndex = index(multiDragElement); + }); // Sort multi-drag elements + + multiDragElements = multiDragElements.sort(function (a, b) { + return a.sortableIndex - b.sortableIndex; + }); + dragStarted = true; + }, + dragStarted: function dragStarted(_ref7) { + var _this2 = this; + + var sortable = _ref7.sortable; + if (!this.isMultiDrag) return; + + if (this.options.sort) { + // Capture rects, + // hide multi drag elements (by positioning them absolute), + // set multi drag elements rects to dragRect, + // show multi drag elements, + // animate to rects, + // unset rects & remove from DOM + sortable.captureAnimationState(); + + if (this.options.animation) { + multiDragElements.forEach(function (multiDragElement) { + if (multiDragElement === dragEl$1) return; + css(multiDragElement, 'position', 'absolute'); + }); + var dragRect = getRect(dragEl$1, false, true, true); + multiDragElements.forEach(function (multiDragElement) { + if (multiDragElement === dragEl$1) return; + setRect(multiDragElement, dragRect); + }); + folding = true; + initialFolding = true; + } + } + + sortable.animateAll(function () { + folding = false; + initialFolding = false; + + if (_this2.options.animation) { + multiDragElements.forEach(function (multiDragElement) { + unsetRect(multiDragElement); + }); + } // Remove all auxiliary multidrag items from el, if sorting enabled + + + if (_this2.options.sort) { + removeMultiDragElements(); + } + }); + }, + dragOver: function dragOver(_ref8) { + var target = _ref8.target, + completed = _ref8.completed, + cancel = _ref8.cancel; + + if (folding && ~multiDragElements.indexOf(target)) { + completed(false); + cancel(); + } + }, + revert: function revert(_ref9) { + var fromSortable = _ref9.fromSortable, + rootEl = _ref9.rootEl, + sortable = _ref9.sortable, + dragRect = _ref9.dragRect; + + if (multiDragElements.length > 1) { + // Setup unfold animation + multiDragElements.forEach(function (multiDragElement) { + sortable.addAnimationState({ + target: multiDragElement, + rect: folding ? getRect(multiDragElement) : dragRect + }); + unsetRect(multiDragElement); + multiDragElement.fromRect = dragRect; + fromSortable.removeAnimationState(multiDragElement); + }); + folding = false; + insertMultiDragElements(!this.options.removeCloneOnHide, rootEl); + } + }, + dragOverCompleted: function dragOverCompleted(_ref10) { + var sortable = _ref10.sortable, + isOwner = _ref10.isOwner, + insertion = _ref10.insertion, + activeSortable = _ref10.activeSortable, + parentEl = _ref10.parentEl, + putSortable = _ref10.putSortable; + var options = this.options; + + if (insertion) { + // Clones must be hidden before folding animation to capture dragRectAbsolute properly + if (isOwner) { + activeSortable._hideClone(); + } + + initialFolding = false; // If leaving sort:false root, or already folding - Fold to new location + + if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) { + // Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible + var dragRectAbsolute = getRect(dragEl$1, false, true, true); + multiDragElements.forEach(function (multiDragElement) { + if (multiDragElement === dragEl$1) return; + setRect(multiDragElement, dragRectAbsolute); // Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted + // while folding, and so that we can capture them again because old sortable will no longer be fromSortable + + parentEl.appendChild(multiDragElement); + }); + folding = true; + } // Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out + + + if (!isOwner) { + // Only remove if not folding (folding will remove them anyways) + if (!folding) { + removeMultiDragElements(); + } + + if (multiDragElements.length > 1) { + var clonesHiddenBefore = clonesHidden; + + activeSortable._showClone(sortable); // Unfold animation for clones if showing from hidden + + + if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) { + multiDragClones.forEach(function (clone) { + activeSortable.addAnimationState({ + target: clone, + rect: clonesFromRect + }); + clone.fromRect = clonesFromRect; + clone.thisAnimationDuration = null; + }); + } + } else { + activeSortable._showClone(sortable); + } + } + } + }, + dragOverAnimationCapture: function dragOverAnimationCapture(_ref11) { + var dragRect = _ref11.dragRect, + isOwner = _ref11.isOwner, + activeSortable = _ref11.activeSortable; + multiDragElements.forEach(function (multiDragElement) { + multiDragElement.thisAnimationDuration = null; + }); + + if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) { + clonesFromRect = _extends({}, dragRect); + var dragMatrix = matrix(dragEl$1, true); + clonesFromRect.top -= dragMatrix.f; + clonesFromRect.left -= dragMatrix.e; + } + }, + dragOverAnimationComplete: function dragOverAnimationComplete() { + if (folding) { + folding = false; + removeMultiDragElements(); + } + }, + drop: function drop(_ref12) { + var evt = _ref12.originalEvent, + rootEl = _ref12.rootEl, + parentEl = _ref12.parentEl, + sortable = _ref12.sortable, + dispatchSortableEvent = _ref12.dispatchSortableEvent, + oldIndex = _ref12.oldIndex, + putSortable = _ref12.putSortable; + var toSortable = putSortable || this.sortable; + if (!evt) return; + var options = this.options, + children = parentEl.children; // Multi-drag selection + + if (!dragStarted) { + if (options.multiDragKey && !this.multiDragKeyDown) { + this._deselectMultiDrag(); + } + + toggleClass(dragEl$1, options.selectedClass, !~multiDragElements.indexOf(dragEl$1)); + + if (!~multiDragElements.indexOf(dragEl$1)) { + multiDragElements.push(dragEl$1); + dispatchEvent({ + sortable: sortable, + rootEl: rootEl, + name: 'select', + targetEl: dragEl$1, + originalEvt: evt + }); // Modifier activated, select from last to dragEl + + if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) { + var lastIndex = index(lastMultiDragSelect), + currentIndex = index(dragEl$1); + + if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) { + // Must include lastMultiDragSelect (select it), in case modified selection from no selection + // (but previous selection existed) + var n, i; + + if (currentIndex > lastIndex) { + i = lastIndex; + n = currentIndex; + } else { + i = currentIndex; + n = lastIndex + 1; + } + + for (; i < n; i++) { + if (~multiDragElements.indexOf(children[i])) continue; + toggleClass(children[i], options.selectedClass, true); + multiDragElements.push(children[i]); + dispatchEvent({ + sortable: sortable, + rootEl: rootEl, + name: 'select', + targetEl: children[i], + originalEvt: evt + }); + } + } + } else { + lastMultiDragSelect = dragEl$1; + } + + multiDragSortable = toSortable; + } else { + multiDragElements.splice(multiDragElements.indexOf(dragEl$1), 1); + lastMultiDragSelect = null; + dispatchEvent({ + sortable: sortable, + rootEl: rootEl, + name: 'deselect', + targetEl: dragEl$1, + originalEvt: evt + }); + } + } // Multi-drag drop + + + if (dragStarted && this.isMultiDrag) { + // Do not "unfold" after around dragEl if reverted + if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) { + var dragRect = getRect(dragEl$1), + multiDragIndex = index(dragEl$1, ':not(.' + this.options.selectedClass + ')'); + if (!initialFolding && options.animation) dragEl$1.thisAnimationDuration = null; + toSortable.captureAnimationState(); + + if (!initialFolding) { + if (options.animation) { + dragEl$1.fromRect = dragRect; + multiDragElements.forEach(function (multiDragElement) { + multiDragElement.thisAnimationDuration = null; + + if (multiDragElement !== dragEl$1) { + var rect = folding ? getRect(multiDragElement) : dragRect; + multiDragElement.fromRect = rect; // Prepare unfold animation + + toSortable.addAnimationState({ + target: multiDragElement, + rect: rect + }); + } + }); + } // Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert + // properly they must all be removed + + + removeMultiDragElements(); + multiDragElements.forEach(function (multiDragElement) { + if (children[multiDragIndex]) { + parentEl.insertBefore(multiDragElement, children[multiDragIndex]); + } else { + parentEl.appendChild(multiDragElement); + } + + multiDragIndex++; + }); // If initial folding is done, the elements may have changed position because they are now + // unfolding around dragEl, even though dragEl may not have his index changed, so update event + // must be fired here as Sortable will not. + + if (oldIndex === index(dragEl$1)) { + var update = false; + multiDragElements.forEach(function (multiDragElement) { + if (multiDragElement.sortableIndex !== index(multiDragElement)) { + update = true; + return; + } + }); + + if (update) { + dispatchSortableEvent('update'); + } + } + } // Must be done after capturing individual rects (scroll bar) + + + multiDragElements.forEach(function (multiDragElement) { + unsetRect(multiDragElement); + }); + toSortable.animateAll(); + } + + multiDragSortable = toSortable; + } // Remove clones if necessary + + + if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') { + multiDragClones.forEach(function (clone) { + clone.parentNode && clone.parentNode.removeChild(clone); + }); + } + }, + nullingGlobal: function nullingGlobal() { + this.isMultiDrag = dragStarted = false; + multiDragClones.length = 0; + }, + destroyGlobal: function destroyGlobal() { + this._deselectMultiDrag(); + + off(document, 'pointerup', this._deselectMultiDrag); + off(document, 'mouseup', this._deselectMultiDrag); + off(document, 'touchend', this._deselectMultiDrag); + off(document, 'keydown', this._checkKeyDown); + off(document, 'keyup', this._checkKeyUp); + }, + _deselectMultiDrag: function _deselectMultiDrag(evt) { + if (typeof dragStarted !== "undefined" && dragStarted) return; // Only deselect if selection is in this sortable + + if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable + + if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click + + if (evt && evt.button !== 0) return; + + while (multiDragElements.length) { + var el = multiDragElements[0]; + toggleClass(el, this.options.selectedClass, false); + multiDragElements.shift(); + dispatchEvent({ + sortable: this.sortable, + rootEl: this.sortable.el, + name: 'deselect', + targetEl: el, + originalEvt: evt + }); + } + }, + _checkKeyDown: function _checkKeyDown(evt) { + if (evt.key === this.options.multiDragKey) { + this.multiDragKeyDown = true; + } + }, + _checkKeyUp: function _checkKeyUp(evt) { + if (evt.key === this.options.multiDragKey) { + this.multiDragKeyDown = false; + } + } + }; + return _extends(MultiDrag, { + // Static methods & properties + pluginName: 'multiDrag', + utils: { + /** + * Selects the provided multi-drag item + * @param {HTMLElement} el The element to be selected + */ + select: function select(el) { + var sortable = el.parentNode[expando]; + if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return; + + if (multiDragSortable && multiDragSortable !== sortable) { + multiDragSortable.multiDrag._deselectMultiDrag(); + + multiDragSortable = sortable; + } + + toggleClass(el, sortable.options.selectedClass, true); + multiDragElements.push(el); + }, + + /** + * Deselects the provided multi-drag item + * @param {HTMLElement} el The element to be deselected + */ + deselect: function deselect(el) { + var sortable = el.parentNode[expando], + index = multiDragElements.indexOf(el); + if (!sortable || !sortable.options.multiDrag || !~index) return; + toggleClass(el, sortable.options.selectedClass, false); + multiDragElements.splice(index, 1); + } + }, + eventProperties: function eventProperties() { + var _this3 = this; + + var oldIndicies = [], + newIndicies = []; + multiDragElements.forEach(function (multiDragElement) { + oldIndicies.push({ + multiDragElement: multiDragElement, + index: multiDragElement.sortableIndex + }); // multiDragElements will already be sorted if folding + + var newIndex; + + if (folding && multiDragElement !== dragEl$1) { + newIndex = -1; + } else if (folding) { + newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')'); + } else { + newIndex = index(multiDragElement); + } + + newIndicies.push({ + multiDragElement: multiDragElement, + index: newIndex + }); + }); + return { + items: _toConsumableArray(multiDragElements), + clones: [].concat(multiDragClones), + oldIndicies: oldIndicies, + newIndicies: newIndicies + }; + }, + optionListeners: { + multiDragKey: function multiDragKey(key) { + key = key.toLowerCase(); + + if (key === 'ctrl') { + key = 'Control'; + } else if (key.length > 1) { + key = key.charAt(0).toUpperCase() + key.substr(1); + } + + return key; + } + } + }); + } + + function insertMultiDragElements(clonesInserted, rootEl) { + multiDragElements.forEach(function (multiDragElement, i) { + var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)]; + + if (target) { + rootEl.insertBefore(multiDragElement, target); + } else { + rootEl.appendChild(multiDragElement); + } + }); + } + /** + * Insert multi-drag clones + * @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted + * @param {HTMLElement} rootEl + */ + + + function insertMultiDragClones(elementsInserted, rootEl) { + multiDragClones.forEach(function (clone, i) { + var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)]; + + if (target) { + rootEl.insertBefore(clone, target); + } else { + rootEl.appendChild(clone); + } + }); + } + + function removeMultiDragElements() { + multiDragElements.forEach(function (multiDragElement) { + if (multiDragElement === dragEl$1) return; + multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement); + }); + } + + Sortable.mount(new AutoScrollPlugin()); + Sortable.mount(Remove, Revert); + + Sortable.mount(new SwapPlugin()); + Sortable.mount(new MultiDragPlugin()); + + return Sortable; + +})); diff --git a/module-form/src/main/resources/static/form-design/modules/Sortable/Sortable.min.js b/module-form/src/main/resources/static/form-design/modules/Sortable/Sortable.min.js new file mode 100644 index 00000000..eba06149 --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/Sortable/Sortable.min.js @@ -0,0 +1,2 @@ +/*! Sortable 1.10.2 - MIT | git://github.com/SortableJS/Sortable.git */ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Sortable=e()}(this,function(){"use strict";function o(t){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(){return(a=Object.assign||function(t){for(var e=1;e"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return!1}return!1}}function P(t,e,n,o){if(t){n=n||document;do{if(null!=e&&(">"===e[0]?t.parentNode===n&&h(t,e):h(t,e))||o&&t===n)return t;if(t===n)break}while(t=(i=t).host&&i!==document&&i.host.nodeType?i.host:i.parentNode)}var i;return null}var f,p=/\s+/g;function k(t,e,n){if(t&&e)if(t.classList)t.classList[n?"add":"remove"](e);else{var o=(" "+t.className+" ").replace(p," ").replace(" "+e+" "," ");t.className=(o+(n?" "+e:"")).replace(p," ")}}function R(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];e in o||-1!==e.indexOf("webkit")||(e="-webkit-"+e),o[e]=n+("string"==typeof n?"":"px")}}function v(t,e){var n="";if("string"==typeof t)n=t;else do{var o=R(t,"transform");o&&"none"!==o&&(n=o+" "+n)}while(!e&&(t=t.parentNode));var i=window.DOMMatrix||window.WebKitCSSMatrix||window.CSSMatrix||window.MSCSSMatrix;return i&&new i(n)}function g(t,e,n){if(t){var o=t.getElementsByTagName(e),i=0,r=o.length;if(n)for(;i=e.left-n&&r<=e.right+n,i=a>=e.top-n&&a<=e.bottom+n;return n&&o&&i?l=t:void 0}}),l}((t=t.touches?t.touches[0]:t).clientX,t.clientY);if(e){var n={};for(var o in t)t.hasOwnProperty(o)&&(n[o]=t[o]);n.target=n.rootEl=e,n.preventDefault=void 0,n.stopPropagation=void 0,e[j]._onDragOver(n)}}}function kt(t){z&&z.parentNode[j]._isOutsideThisEl(t.target)}function Rt(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.el=t,this.options=e=a({},e),t[j]=this;var n={group:null,sort:!0,disabled:!1,store:null,handle:null,draggable:/^[uo]l$/i.test(t.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return Ot(t,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:(Number.parseInt?Number:window).parseInt(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==Rt.supportPointer&&"PointerEvent"in window,emptyInsertThreshold:5};for(var o in O.initializePlugins(this,t,n),n)o in e||(e[o]=n[o]);for(var i in At(e),this)"_"===i.charAt(0)&&"function"==typeof this[i]&&(this[i]=this[i].bind(this));this.nativeDraggable=!e.forceFallback&&xt,this.nativeDraggable&&(this.options.touchStartThreshold=1),e.supportPointer?u(t,"pointerdown",this._onTapStart):(u(t,"mousedown",this._onTapStart),u(t,"touchstart",this._onTapStart)),this.nativeDraggable&&(u(t,"dragover",this),u(t,"dragenter",this)),bt.push(this.el),e.store&&e.store.get&&this.sort(e.store.get(this)||[]),a(this,T())}function Xt(t,e,n,o,i,r,a,l){var s,c,u=t[j],d=u.options.onMove;return!window.CustomEvent||w||E?(s=document.createEvent("Event")).initEvent("move",!0,!0):s=new CustomEvent("move",{bubbles:!0,cancelable:!0}),s.to=e,s.from=t,s.dragged=n,s.draggedRect=o,s.related=i||e,s.relatedRect=r||X(e),s.willInsertAfter=l,s.originalEvent=a,t.dispatchEvent(s),d&&(c=d.call(u,s,a)),c}function Yt(t){t.draggable=!1}function Bt(){Dt=!1}function Ft(t){for(var e=t.tagName+t.className+t.src+t.href+t.textContent,n=e.length,o=0;n--;)o+=e.charCodeAt(n);return o.toString(36)}function Ht(t){return setTimeout(t,0)}function Lt(t){return clearTimeout(t)}Rt.prototype={constructor:Rt,_isOutsideThisEl:function(t){this.el.contains(t)||t===this.el||(ht=null)},_getDirection:function(t,e){return"function"==typeof this.options.direction?this.options.direction.call(this,t,e,z):this.options.direction},_onTapStart:function(e){if(e.cancelable){var n=this,o=this.el,t=this.options,i=t.preventOnFilter,r=e.type,a=e.touches&&e.touches[0]||e.pointerType&&"touch"===e.pointerType&&e,l=(a||e).target,s=e.target.shadowRoot&&(e.path&&e.path[0]||e.composedPath&&e.composedPath()[0])||l,c=t.filter;if(function(t){St.length=0;var e=t.getElementsByTagName("input"),n=e.length;for(;n--;){var o=e[n];o.checked&&St.push(o)}}(o),!z&&!(/mousedown|pointerdown/.test(r)&&0!==e.button||t.disabled||s.isContentEditable||(l=P(l,t.draggable,o,!1))&&l.animated||Z===l)){if(J=F(l),et=F(l,t.draggable),"function"==typeof c){if(c.call(this,e,l,this))return W({sortable:n,rootEl:s,name:"filter",targetEl:l,toEl:o,fromEl:o}),K("filter",n,{evt:e}),void(i&&e.cancelable&&e.preventDefault())}else if(c&&(c=c.split(",").some(function(t){if(t=P(s,t.trim(),o,!1))return W({sortable:n,rootEl:t,name:"filter",targetEl:l,fromEl:o,toEl:o}),K("filter",n,{evt:e}),!0})))return void(i&&e.cancelable&&e.preventDefault());t.handle&&!P(s,t.handle,o,!1)||this._prepareDragStart(e,a,l)}}},_prepareDragStart:function(t,e,n){var o,i=this,r=i.el,a=i.options,l=r.ownerDocument;if(n&&!z&&n.parentNode===r){var s=X(n);if(q=r,G=(z=n).parentNode,V=z.nextSibling,Z=n,ot=a.group,rt={target:Rt.dragged=z,clientX:(e||t).clientX,clientY:(e||t).clientY},ct=rt.clientX-s.left,ut=rt.clientY-s.top,this._lastX=(e||t).clientX,this._lastY=(e||t).clientY,z.style["will-change"]="all",o=function(){K("delayEnded",i,{evt:t}),Rt.eventCanceled?i._onDrop():(i._disableDelayedDragEvents(),!c&&i.nativeDraggable&&(z.draggable=!0),i._triggerDragStart(t,e),W({sortable:i,name:"choose",originalEvent:t}),k(z,a.chosenClass,!0))},a.ignore.split(",").forEach(function(t){g(z,t.trim(),Yt)}),u(l,"dragover",Pt),u(l,"mousemove",Pt),u(l,"touchmove",Pt),u(l,"mouseup",i._onDrop),u(l,"touchend",i._onDrop),u(l,"touchcancel",i._onDrop),c&&this.nativeDraggable&&(this.options.touchStartThreshold=4,z.draggable=!0),K("delayStart",this,{evt:t}),!a.delay||a.delayOnTouchOnly&&!e||this.nativeDraggable&&(E||w))o();else{if(Rt.eventCanceled)return void this._onDrop();u(l,"mouseup",i._disableDelayedDrag),u(l,"touchend",i._disableDelayedDrag),u(l,"touchcancel",i._disableDelayedDrag),u(l,"mousemove",i._delayedDragTouchMoveHandler),u(l,"touchmove",i._delayedDragTouchMoveHandler),a.supportPointer&&u(l,"pointermove",i._delayedDragTouchMoveHandler),i._dragStartTimer=setTimeout(o,a.delay)}}},_delayedDragTouchMoveHandler:function(t){var e=t.touches?t.touches[0]:t;Math.max(Math.abs(e.clientX-this._lastX),Math.abs(e.clientY-this._lastY))>=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){z&&Yt(z),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;d(t,"mouseup",this._disableDelayedDrag),d(t,"touchend",this._disableDelayedDrag),d(t,"touchcancel",this._disableDelayedDrag),d(t,"mousemove",this._delayedDragTouchMoveHandler),d(t,"touchmove",this._delayedDragTouchMoveHandler),d(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(t,e){e=e||"touch"==t.pointerType&&t,!this.nativeDraggable||e?this.options.supportPointer?u(document,"pointermove",this._onTouchMove):u(document,e?"touchmove":"mousemove",this._onTouchMove):(u(z,"dragend",this),u(q,"dragstart",this._onDragStart));try{document.selection?Ht(function(){document.selection.empty()}):window.getSelection().removeAllRanges()}catch(t){}},_dragStarted:function(t,e){if(vt=!1,q&&z){K("dragStarted",this,{evt:e}),this.nativeDraggable&&u(document,"dragover",kt);var n=this.options;t||k(z,n.dragClass,!1),k(z,n.ghostClass,!0),Rt.active=this,t&&this._appendGhost(),W({sortable:this,name:"start",originalEvent:e})}else this._nulling()},_emulateDragOver:function(){if(at){this._lastX=at.clientX,this._lastY=at.clientY,Nt();for(var t=document.elementFromPoint(at.clientX,at.clientY),e=t;t&&t.shadowRoot&&(t=t.shadowRoot.elementFromPoint(at.clientX,at.clientY))!==e;)e=t;if(z.parentNode[j]._isOutsideThisEl(t),e)do{if(e[j]){if(e[j]._onDragOver({clientX:at.clientX,clientY:at.clientY,target:t,rootEl:e})&&!this.options.dragoverBubble)break}t=e}while(e=e.parentNode);It()}},_onTouchMove:function(t){if(rt){var e=this.options,n=e.fallbackTolerance,o=e.fallbackOffset,i=t.touches?t.touches[0]:t,r=U&&v(U,!0),a=U&&r&&r.a,l=U&&r&&r.d,s=Ct&>&&b(gt),c=(i.clientX-rt.clientX+o.x)/(a||1)+(s?s[0]-Et[0]:0)/(a||1),u=(i.clientY-rt.clientY+o.y)/(l||1)+(s?s[1]-Et[1]:0)/(l||1);if(!Rt.active&&!vt){if(n&&Math.max(Math.abs(i.clientX-this._lastX),Math.abs(i.clientY-this._lastY))o.right+10||t.clientX<=o.right&&t.clientY>o.bottom&&t.clientX>=o.left:t.clientX>o.right&&t.clientY>o.top||t.clientX<=o.right&&t.clientY>o.bottom+10}(n,a,this)&&!g.animated){if(g===z)return A(!1);if(g&&l===n.target&&(s=g),s&&(i=X(s)),!1!==Xt(q,l,z,o,s,i,n,!!s))return O(),l.appendChild(z),G=l,N(),A(!0)}else if(s.parentNode===l){i=X(s);var v,m,b,y=z.parentNode!==l,w=!function(t,e,n){var o=n?t.left:t.top,i=n?t.right:t.bottom,r=n?t.width:t.height,a=n?e.left:e.top,l=n?e.right:e.bottom,s=n?e.width:e.height;return o===a||i===l||o+r/2===a+s/2}(z.animated&&z.toRect||o,s.animated&&s.toRect||i,a),E=a?"top":"left",D=Y(s,"top","top")||Y(z,"top","top"),S=D?D.scrollTop:void 0;if(ht!==s&&(m=i[E],yt=!1,wt=!w&&e.invertSwap||y),0!==(v=function(t,e,n,o,i,r,a,l){var s=o?t.clientY:t.clientX,c=o?n.height:n.width,u=o?n.top:n.left,d=o?n.bottom:n.right,h=!1;if(!a)if(l&&pt.layui-tab { + margin: 0; + box-shadow: none; + border: none; +} + +/* 表达式 */ +.cron-title { + font-weight: 700; + font-size: 14px; + margin: 10px; + margin-bottom: 0; +} + +.cron-box { + margin: 10px; +} + +.cron-box+.cron-box { + margin-top: 0; +} + +/* 按钮 */ +.cron-footer-btns { + text-align: right; +} + +.cron-footer-btns span { + height: 26px; + line-height: 26px; + margin: 0 0 0 -1px; + padding: 0 10px; + border: 1px solid #C9C9C9; + background-color: #fff; + white-space: nowrap; + vertical-align: top; + border-radius: 2px; + display: inline-block; + cursor: pointer; + font-size: 12px; + box-sizing: border-box; + color: #666; +} + +.cron-footer-btns span:hover { + color: #5FB878; +} + + +/* 表单 */ +.layui-cron .layui-form-radio { + margin-right: 0; +} + +.cron-form { + line-height: 28px; + font-size: 14px; +} + +.cron-input-mid { + display: inline-block; + vertical-align: middle; + margin-top: 6px; + background-color: #e5e5e5; + padding: 0 12px; + height: 28px; + line-height: 28px; + border: 1px solid #ccc; + box-sizing: border-box; +} + +.cron-input { + display: inline-block; + vertical-align: middle; + margin-top: 6px; + padding: 0 8px; + background-color: #fff; + border: 1px solid #ccc; + height: 28px; + line-height: 28px; + box-sizing: border-box; + width: 80px; + -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; +} + +.cron-input:focus { + outline: 0; + border: 1px solid #01AAED; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 4px 0px #01AAED; + translate: 1s; +} + +.layui-cron .layui-form-checkbox[lay-skin="primary"] span { + padding-right: 10px; + min-width: 16px; +} + +.layui-cron .layui-form-checkbox[lay-skin="primary"] { + padding-left: 22px; + margin-top: 5px; +} +.layui-cron input[type=number] { + -moz-appearance:textfield; +} +.layui-cron input[type=number]::-webkit-inner-spin-button, +.layui-cron input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.cron-tips{ + color: grey; + line-height: 28px; + height: 28px; + display: inline-block; + vertical-align: middle; + margin-top: 8px; + margin-left: 5px; +} \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/cron.js b/module-form/src/main/resources/static/form-design/modules/cron.js new file mode 100644 index 00000000..e050c3ed --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/cron.js @@ -0,0 +1,1131 @@ +layui.define(["form"], function (exports) { + //假如该组件依赖 layui.form + var $ = layui.$, + form = layui.form, + //字符常量 + MOD_NAME = "cron", + ELEM = ".layui-cron", + //外部接口 + cron = { + v: "1.0.0", + index: layui.cron ? layui.cron.index + 10000 : 0, + + //设置全局项 + set: function (options) { + var that = this; + that.config = $.extend({}, that.config, options); + return that; + }, + + //事件监听 + on: function (events, callback) { + return layui.onevent.call(this, MOD_NAME, events, callback); + }, + //主体CSS等待事件 + ready: function (fn) { + var cssPath = layui.cache.base + "cron/cron.css?v=" + cron.v; + layui.link(cssPath, fn, "cron"); //此处的“cron”要对应 cron.css 中的样式： html #layuicss-cron{} + return this; + }, + }, + // 返回当前实例 + thisIns = function () { + var that = this, + options = that.config, + id = options.id || options.index; + return { + reload: function (options) { + that.reload.call(that, options); + }, + config: options, + }; + }, + //构造器 + Class = function (options) { + var that = this; + that.index = ++cron.index; + that.config = $.extend({}, that.config, cron.config, options); + cron.ready(function () { + that.init(); + }); + }; + + //默认配置 + Class.prototype.config = { + value: "* * * * * ?", // 当前表达式值，每秒执行一次 + lang: "cn", //语言，只支持cn/en，即中文和英文 + trigger: "focus", //呼出控件的事件 + done: null, //控件选择完毕后的回调，点击运行/确定也均会触发 + run: null, // 最近运行时间接口 + }; + + // 多语言 + Class.prototype.lang = function () { + var that = this, + options = that.config, + text = { + cn: { + tabs: ["秒", "分", "时", "日", "月", "周", "年"], + tools: { + confirm: "确定", + parse: "解析", + run: "运行", + }, + }, + en: { + tabs: [ + "Seconds", + "Minutes", + "Hours", + "Days", + "Months", + "Weeks", + "Years", + ], + weeks: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], + month: [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ], + tools: { + confirm: "Confirm", + parse: "Parse", + run: "Run", + }, + }, + }; + return text[options.lang] || text["cn"]; + }; + + // 初始准备 + Class.prototype.init = function () { + var that = this, + options = that.config; + + that.$elem = $(options.elem); + options.elem = that.$elem[0]; + + if (!options.elem) return; + + options.value || (options.value = "* * * * * ?"); + + // 初始化表达式 + var arr = options.value.split(" "); + that.cron = []; + for (var i = 1; i <= 7; i++) { + if (i < 6) { + that.cron.push(arr[i - 1] || "*"); + } else if (i < 7) { + that.cron.push(arr[i - 1] || "?"); + } else { + that.cron.push(arr[i - 1] || ""); + } + } + + //如果不是input|textarea元素，则默认采用click事件 + if (!that.isInput(options.elem)) { + if (options.trigger === "focus") { + options.trigger = "click"; + } + } + + console.log("绑定事件."); + that.events(); + }; + + // 绑定的元素事件处理 + Class.prototype.events = function () { + var that = this, + options = that.config; + if (!options.elem || options.elem.eventHandler) return; + + // 绑定触发事件 + that.$elem.on(options.trigger, function () { + that.render(); + }); + + // 绑定关闭控件事件 + $(document) + .on("click", function (e) { + if ( + (that.elemCron && that.elemCron.contains(e.target)) || + e.target === options.elem + ) { + return; // 点击的是当前绑定元素或cron容器内的元素则不关闭 + } + that.remove(); + }) + .on("keydown", function (e) { + if (e.keyCode === 13) { + e.preventDefault(); + layer.msg("取消事件默认动作，点击确定按钮"); + // $(that.footer).find(ELEM_CONFIRM)[0].click(); + } + }); + + //自适应定位 + $(window).on("resize", function () { + if (!options.elem || !$(ELEM)[0]) { + return false; + } + that.position(); + }); + + options.elem.eventHandler = true; + }; + + // 渲染视图 + Class.prototype.render = function () { + var that = this, + options = that.config, + lang = that.lang(); + // that.remove(); + + var $elemCron = (that.$elemCron = $('
')), + // 主区域 + elemMain = [], // tabs容器 + elemSeconds = that.getSecondsElem(), // 秒 + elemMinutes = that.getMinutesElem(), // 分 + elemHours = that.getHoursElem(), // 时 + elemDays = that.getDaysElem(), // 日 + elemMonths = that.getMonthsElem(), // 月 + elemWeeks = that.getWeeksElem(), // 周 + elemYears = that.getYearsElem(); // 年 + + // 组装容器 + elemMain.push( + '
', + '
    ' + ); + layui.each(lang.tabs, function (i, tab) { + if (i == 0) { + elemMain.push('
  • ', tab, "
    • "); + } else { + elemMain.push("
  • ", tab, "
    • "); + } + }); + elemMain.push( + "
", + '
', + elemSeconds, + elemMinutes, + elemHours, + elemDays, + elemMonths, + elemWeeks, + elemYears, + "
", + "
" + ); + $elemCron.append(elemMain.join("")); + + // 底部区域 + var elemFooter = [ + '
最近运行时间
', + '
', + '
运行确定
', + ]; + $elemCron.append(elemFooter.join("")); + + // 渲染 + $("body").append($elemCron); + that.elemCron = that.$elemCron[0]; + form.render(); + + // 定位 + that.position(); + + // 监听 + //点击底部按钮 + $elemCron.find(".cron-footer-btns span").on("click", function () { + var type = $(this).attr("lay-type"); + that.tool(this, type); + }); + }; + + // 渲染秒 + Class.prototype.getSecondsElem = function () { + var that = this, + options = that.config, + elem = [ + '
', + ]; + + var radio = ["", "", "", ""]; + val = ["", "", "", "", []]; + + if (that.cron[0] == "*") { + radio[0] = "checked"; + } else if (that.cron[0].split("-").length == 2) { + radio[1] = "checked"; + val[0] = that.cron[0].split("-")[0]; + val[1] = that.cron[0].split("-")[1]; + } else if (that.cron[0].split("/").length == 2) { + radio[2] = "checked"; + val[2] = that.cron[0].split("/")[0]; + val[3] = that.cron[0].split("/")[1]; + } else { + radio[3] = "checked"; + val[4] = that.cron[0].split(","); + } + + elem.push( + '
", + '
", + '
从
', + '
-
', + '
秒
(0-59)
', + '
", + '
从
', + '
秒开始，每
', + '
秒执行一次
(0/60)
', + '
" + ); + elem.push("
"); + for (var i = 0; i < 60; i++) { + elem.push( + ' -1 ? "checked" : "", + ">" + ); + } + elem.push("
"); + + elem.push("
"); + + return elem.join(""); + }; + + // 渲染分 + Class.prototype.getMinutesElem = function () { + var that = this, + options = that.config, + elem = [ + '
', + ]; + + var radio = ["", "", "", ""]; + val = ["", "", "", "", []]; + + if (that.cron[1] == "*") { + radio[0] = "checked"; + } else if (that.cron[1].split("-").length == 2) { + radio[1] = "checked"; + val[0] = that.cron[1].split("-")[0]; + val[1] = that.cron[1].split("-")[1]; + } else if (that.cron[1].split("/").length == 2) { + radio[2] = "checked"; + val[2] = that.cron[1].split("/")[0]; + val[3] = that.cron[1].split("/")[1]; + } else { + radio[3] = "checked"; + val[4] = that.cron[1].split(","); + } + + elem.push( + '
", + '
", + '
从
', + '
-
', + '
分
(0-59)
', + '
", + '
从
', + '
分开始，每
', + '
分执行一次
(0/60)
', + '
" + ); + elem.push("
"); + for (var i = 0; i < 60; i++) { + elem.push( + ' -1 ? "checked" : "", + ">" + ); + } + elem.push("
"); + + elem.push("
"); + + return elem.join(""); + }; + + // 渲染时 + Class.prototype.getHoursElem = function () { + var that = this, + options = that.config, + elem = [ + '
', + ]; + + var radio = ["", "", "", ""]; + val = ["", "", "", "", []]; + + if (that.cron[2] == "*") { + radio[0] = "checked"; + } else if (that.cron[2].split("-").length == 2) { + radio[1] = "checked"; + val[0] = that.cron[2].split("-")[0]; + val[1] = that.cron[2].split("-")[1]; + } else if (that.cron[2].split("/").length == 2) { + radio[2] = "checked"; + val[2] = that.cron[2].split("/")[0]; + val[3] = that.cron[2].split("/")[1]; + } else { + radio[3] = "checked"; + val[4] = that.cron[2].split(","); + } + + elem.push( + '
", + '
", + '
从
', + '
-
', + '
时
(0-23)
', + '
", + '
从
', + '
时开始，每
', + '
时执行一次
(0/24)
', + '
" + ); + elem.push("
"); + for (var i = 0; i < 24; i++) { + elem.push( + ' -1 ? "checked" : "", + ">" + ); + } + elem.push("
"); + + elem.push("
"); + + return elem.join(""); + }; + + // 渲染天 + Class.prototype.getDaysElem = function () { + var that = this, + options = that.config, + elem = [ + '
', + ]; + + var radio = ["", "", "", "", "", "", ""]; + val = ["", "", "", "", "", []]; + + if (that.cron[3] == "*") { + radio[0] = "checked"; + } else if (that.cron[3] == "?") { + radio[1] = "checked"; + } else if (that.cron[3].split("-").length == 2) { + radio[2] = "checked"; + val[0] = that.cron[3].split("-")[0]; + val[1] = that.cron[3].split("-")[1]; + } else if (that.cron[3].split("/").length == 2) { + radio[3] = "checked"; + val[2] = that.cron[3].split("/")[0]; + val[3] = that.cron[3].split("/")[1]; + } else if (that.cron[3].indexOf("W") > -1) { + radio[4] = "checked"; + val[4] = that.cron[3].match(/(\d+)W$/)[1]; + } else if (that.cron[3] == "L") { + radio[5] = "checked"; + } else { + radio[6] = "checked"; + val[5] = that.cron[3].split(","); + } + + elem.push( + '
", + '
", + '
", + '
从
', + '
-
', + '
日
(1-31)
', + '
", + '
从
', + '
日开始，每
', + '
日执行一次
(1/31)
', + '
", + '
每月
', + '
号最近的那个工作日
(1-31)
', + '
", + '
" + ); + elem.push("
"); + for (var i = 1; i <= 31; i++) { + elem.push( + ' -1 ? "checked" : "", + ">" + ); + } + elem.push("
"); + + elem.push("
"); + + return elem.join(""); + }; + + // 渲染月 + Class.prototype.getMonthsElem = function () { + var that = this, + options = that.config, + elem = [ + '
', + ]; + + var radio = ["", "", "", "", ""]; + val = ["", "", "", "", []]; + + if (that.cron[4] == "*") { + radio[0] = "checked"; + } else if (that.cron[4] == "?") { + radio[1] = "checked"; + } else if (that.cron[4].split("-").length == 2) { + radio[2] = "checked"; + val[0] = that.cron[4].split("-")[0]; + val[1] = that.cron[4].split("-")[1]; + } else if (that.cron[4].split("/").length == 2) { + radio[3] = "checked"; + val[2] = that.cron[4].split("/")[0]; + val[3] = that.cron[4].split("/")[1]; + } else { + radio[4] = "checked"; + val[4] = that.cron[4].split(","); + } + + elem.push( + '
", + '
", + '
", + '
从
', + '
-
', + '
月
(1-12)
', + '
", + '
从
', + '
月开始，每
', + '
月执行一次
(1/12)
', + '
" + ); + elem.push("
"); + for (var i = 0; i < 24; i++) { + elem.push( + ' -1 ? "checked" : "", + ">" + ); + } + elem.push("
"); + + elem.push("
"); + + return elem.join(""); + }; + + // 渲染周 + Class.prototype.getWeeksElem = function () { + var that = this, + options = that.config, + elem = [ + '
', + ]; + + var radio = ["", "", "", "", "", ""]; + val = ["", "", "", "", "", []]; + + if (that.cron[5] == "*") { + radio[0] = "checked"; + } else if (that.cron[5] == "?") { + radio[1] = "checked"; + } else if (that.cron[5].split("-").length == 2) { + radio[2] = "checked"; + val[0] = that.cron[5].split("-")[0]; + val[1] = that.cron[5].split("-")[1]; + } else if (that.cron[5].split("#").length == 2) { + radio[3] = "checked"; + val[2] = that.cron[5].split("#")[0]; + val[3] = that.cron[5].split("#")[1]; + } else if (/\d+L/.test(that.cron[5])) { + radio[4] = "checked"; + val[4] = that.cron[5].match(/(\d+)L/)[1]; + } else { + radio[5] = "checked"; + val[5] = that.cron[5].split(","); + } + + elem.push( + '
", + '
", + '
", + '
从
', + '
-
', + '
周
(1-7)
', + '
", + '
第
', + '
周的星期
', + '(1-4/1-7)
', + '
', + '(1-7)
', + '
" + ); + elem.push("
"); + for (var i = 1; i <= 7; i++) { + elem.push( + ' -1 ? "checked" : "", + ">" + ); + } + elem.push("
"); + + elem.push("
"); + + return elem.join(""); + }; + + // 渲染年 + Class.prototype.getYearsElem = function () { + var that = this, + options = that.config, + elem = [ + '
', + ]; + + var radio = ["", "", ""]; + val = ["", ""]; + + if (that.cron[6] == "*") { + radio[0] = "checked"; + } else if (that.cron[6] == "" || that.cron[6] == " ") { + radio[1] = "checked"; + } else if (that.cron[6].split("-").length == 2) { + radio[2] = "checked"; + val[0] = that.cron[6].split("-")[0]; + val[1] = that.cron[6].split("-")[1]; + } + + elem.push( + '
", + '
", + '
", + '
从
', + '
-
', + '
年
' + ); + + elem.push("
"); + + return elem.join(""); + }; + + function isNotBlank(str) { + return str != undefined && str !== ""; + } + + // 底部按钮事件 + Class.prototype.tool = function (btn, type) { + var that = this, + options = that.config, + active = { + // 计算秒 + calSeconds: function () { + var data = form.val("cronSecForm"), + dataType = data["type[0]"]; + if ( + "range" == dataType && + isNotBlank(data.rangeStart) && + isNotBlank(data.rangeEnd) + ) { + that.cron[0] = data.rangeStart + "-" + data.rangeEnd; + } else if ( + "per" == dataType && + isNotBlank(data.perFrom) && + isNotBlank(data.perVal) + ) { + that.cron[0] = data.perFrom + "/" + data.perVal; + } else if ("assign" == dataType) { + var checkbox = []; + layui.each(data, function (key, value) { + if (/^seconds/.test(key)) { + checkbox.push(value); + } + }); + if (checkbox.length) { + that.cron[0] = checkbox.join(","); + } else { + that.cron[0] = "*"; + } + } else if ("all" == dataType) { + that.cron[0] = "*"; + } + }, + calMinutes: function () { + var data = form.val("cronMinForm"), + dataType = data["type[1]"]; + if ( + "range" == dataType && + isNotBlank(data.rangeStart) && + isNotBlank(data.rangeEnd) + ) { + that.cron[1] = data.rangeStart + "-" + data.rangeEnd; + } else if ( + "per" == dataType && + isNotBlank(data.perFrom) && + isNotBlank(data.perVal) + ) { + that.cron[1] = data.perFrom + "/" + data.perVal; + } else if ("assign" == dataType) { + var checkbox = []; + layui.each(data, function (key, value) { + if (/^minutes/.test(key)) { + checkbox.push(value); + } + }); + if (checkbox.length) { + that.cron[1] = checkbox.join(","); + } else { + that.cron[1] = "*"; + } + } else if ("all" == dataType) { + that.cron[1] = "*"; + } + }, + calHours: function () { + var data = form.val("cronHourForm"), + dataType = data["type[2]"]; + if ( + "range" == dataType && + isNotBlank(data.rangeStart) && + isNotBlank(data.rangeEnd) + ) { + that.cron[2] = data.rangeStart + "-" + data.rangeEnd; + } else if ( + "per" == dataType && + isNotBlank(data.perFrom) && + isNotBlank(data.perVal) + ) { + that.cron[2] = data.perFrom + "/" + data.perVal; + } else if ("assign" == dataType) { + var checkbox = []; + layui.each(data, function (key, value) { + if (/^hours/.test(key)) { + checkbox.push(value); + } + }); + if (checkbox.length) { + that.cron[2] = checkbox.join(","); + } else { + that.cron[2] = "*"; + } + } else if ("all" == dataType) { + that.cron[2] = "*"; + } + }, + calDays: function () { + var data = form.val("cronDayForm"), + dataType = data["type[3]"]; + + if ( + "range" == dataType && + isNotBlank(data.rangeStart) && + isNotBlank(data.rangeEnd) + ) { + that.cron[3] = data.rangeStart + "-" + data.rangeEnd; + } else if ( + "per" == dataType && + isNotBlank(data.perFrom) && + isNotBlank(data.perVal) + ) { + that.cron[3] = data.perFrom + "/" + data.perVal; + } else if ("work" == dataType && isNotBlank(data.workDay)) { + that.cron[3] = data.workDay + "W"; + } else if ("last" == dataType) { + that.cron[3] = "L"; + } else if ("assign" == dataType) { + var checkbox = []; + layui.each(data, function (key, value) { + if (/^days/.test(key)) { + checkbox.push(value); + } + }); + if (checkbox.length) { + that.cron[3] = checkbox.join(","); + } else { + that.cron[3] = "*"; + } + } else if ("all" == dataType) { + that.cron[3] = "*"; + } else if ("none" == dataType) { + that.cron[3] = "?"; + } + }, + calMonths: function () { + var data = form.val("cronMonthFrom"), + dataType = data["type[4]"]; + if ( + "range" == dataType && + isNotBlank(data.rangeStart) && + isNotBlank(data.rangeEnd) + ) { + that.cron[4] = data.rangeStart + "-" + data.rangeEnd; + } else if ( + "per" == dataType && + isNotBlank(data.perFrom) && + isNotBlank(data.perVal) + ) { + that.cron[4] = data.perFrom + "/" + data.perVal; + } else if ("assign" == dataType) { + var checkbox = []; + layui.each(data, function (key, value) { + if (/^months/.test(key)) { + checkbox.push(value); + } + }); + if (checkbox.length) { + that.cron[4] = checkbox.join(","); + } else { + that.cron[4] = "*"; + } + } else if ("all" == dataType) { + that.cron[4] = "*"; + } else if ("none" == dataType) { + that.cron[4] = "?"; + } + }, + calWeeks: function () { + var data = form.val("cronWeekForm"), + dataType = data["type[5]"]; + console.log(data); + if ( + "range" == dataType && + isNotBlank(data.rangeStart) && + isNotBlank(data.rangeEnd) + ) { + that.cron[5] = data.rangeStart + "-" + data.rangeEnd; + } else if ( + "per" == dataType && + isNotBlank(data.perFrom) && + isNotBlank(data.perVal) + ) { + that.cron[5] = data.perFrom + "#" + data.perVal; + } else if ("last" == dataType && isNotBlank(data.lastVal)) { + that.cron[5] = data.lastVal + "L"; + } else if ("assign" == dataType) { + var checkbox = []; + layui.each(data, function (key, value) { + if (/^weeks/.test(key)) { + checkbox.push(value); + } + }); + if (checkbox.length) { + that.cron[5] = checkbox.join(","); + } else { + that.cron[5] = "*"; + } + } else if ("all" == dataType) { + that.cron[5] = "*"; + } else if ("none" == dataType) { + that.cron[5] = "?"; + } + }, + calYears: function () { + var data = form.val("cronYearForm"), + dataType = data["type[6]"]; + if ( + "range" == dataType && + isNotBlank(data.rangeStart) && + isNotBlank(data.rangeEnd) + ) { + that.cron[6] = data.rangeStart + "-" + data.rangeEnd; + } else if ("all" == dataType) { + that.cron[6] = "*"; + } else if ("none" == dataType) { + that.cron[6] = ""; + } + }, + + // 计算表达式 + calculate: function () { + active.calSeconds(); + active.calMinutes(); + active.calHours(); + active.calDays(); + active.calMonths(); + active.calWeeks(); + active.calYears(); + if (that.cron[5] != "?" && that.cron[3] != "?") { + layer.msg("不支持周参数和日参数同时存在"); + return false; + } + return true; + }, + // 运行 + run: function () { + if (!active.calculate()) { + return; + } + var cronStr = that.cron.join(" ").trim(); + // TODO 请求接口获取最近运行时间，或js生成最近运行时间 + if (options.url) { + $.post( + options.url, + { cron: cronStr }, + function (res) { + if (res.code == 0) { + $("#run-list").empty().append(res.data.join("
")); + } else { + layer.alert(res.msg, { icon: 2, title: "错误" }); + } + }, + "json" + ); + } + options.done(cronStr); + }, + + //确定 + confirm: function () { + if (!active.calculate()) { + return; + } + var cronStr = that.cron.join(" ").trim(); + options.done && options.done(cronStr); + that.remove(); + }, + }; + active[type] && active[type](); + }; + + // 定位算法 + Class.prototype.position = function () { + var that = this, + options = that.config, + elem = options.elem, + rect = elem.getBoundingClientRect(), //绑定元素的坐标 + cronWidth = that.elemCron.offsetWidth, //控件的宽度 + cronHeight = that.elemCron.offsetHeight, //控件的高度 + //滚动条高度 + scrollArea = function (type) { + type = type ? "scrollLeft" : "scrollTop"; + return document.body[type] | document.documentElement[type]; + }, + winArea = function (type) { + return document.documentElement[type ? "clientWidth" : "clientHeight"]; + }, + margin = 5, + left = rect.left, + top = rect.bottom; + + //如果右侧超出边界 + if (left + cronWidth + margin > winArea("width")) { + left = winArea("width") - cronWidth - margin; + } + + //如果底部超出边界 + if (top + cronHeight + margin > winArea()) { + top = + rect.top > cronHeight //顶部是否有足够区域显示完全 + ? rect.top - cronHeight + : winArea() - cronHeight; + top = top - margin * 2; + } + + that.elemCron.style.left = + left + (options.position === "fixed" ? 0 : scrollArea(1)) + "px"; + that.elemCron.style.top = + top + (options.position === "fixed" ? 0 : scrollArea()) + "px"; + }; + + // 控件移除 + Class.prototype.remove = function () { + var that = this, + options = that.config; + $(ELEM).remove(); + }; + + // 是否输入框 + Class.prototype.isInput = function (elem) { + return /input|textarea/.test(elem.tagName.toLocaleLowerCase()); + }; + + /** + * 核心入口 + * @param options + * @returns {{reload: reload, config: *}} + */ + cron.render = function (options) { + var ins = new Class(options); + return thisIns.call(ins); + }; + + exports("cron", cron); +}); diff --git a/module-form/src/main/resources/static/form-design/modules/formDesigner.css b/module-form/src/main/resources/static/form-design/modules/formDesigner.css new file mode 100644 index 00000000..89ea36a9 --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/formDesigner.css @@ -0,0 +1,370 @@ +.layui-layout-admin .layui-logo { + color : #fff; + font-size: 20px; +} + +.layui-side-right { + position : fixed; + right : 0; + top : 0; + bottom : 0; + z-index : 999; + width : 350px; + overflow-x: hidden +} + +.layui-layout-admin .layui-side { + top : 60px; + width : 260px; + overflow-x: hidden +} + +.layui-layout-admin .layui-side-right { + top : 60px; + width : 350px; + overflow-x: hidden +} + +.layui-body { + position : absolute; + left : 260px; + right : 350px; + top : 0; + bottom : 0; + z-index : 998; + width : auto; + overflow-y : auto; + box-sizing : border-box; + min-width : 250px; + border-left : 1px solid #e6e6e6; + border-right: 1px solid #e6e6e6; +} + +.layui-layout-admin .layui-body { + bottom: 0; +} + +/* components-list*/ + +.components-list { + padding : 4px; + -webkit-box-sizing: border-box; + box-sizing : border-box; + height : 100% +} + +.components-list .components-item { + display : inline-block; + width : 49%; + margin : 0.5%; + margin-top : 5px; + -webkit-transition: -webkit-transform 0ms !important; + transition : -webkit-transform 0ms !important; + transition : transform 0ms !important; + transition : transform 0ms, -webkit-transform 0ms !important +} + +.components-draggable { + padding-bottom: 20px +} + +.components-title { + font-size: 14px; + color : #222; + margin : 6px 2px +} + +.components-title .svg-icon { + color : #666; + font-size: 18px +} + +.components-body { + padding : 8px 10px; + background : #f6f7ff; + font-size : 12px; + cursor : move; + border : 1px dashed #f6f7ff; + border-radius: 3px +} + +.components-body .svg-icon { + color : #777; + font-size: 15px +} + +.components-body:hover { + border: 1px dashed #787be8; + color : #787be8 +} + +.components-body:hover .svg-icon { + color: #787be8 +} + +.ghost { + + border : 1px dashed #e06c1d; + outline-width: 0; + height : 39px; + box-sizing : border-box; + font-size : 0; + content : ''; + overflow : hidden; + padding : 0; +} +.ghost div { + background-color:#fff; + color:#fff; +} + +.layui-body .active { + outline : 2px solid #409EFF; + border : 1px solid #409EFF; + outline-offset: 0; +} + +#formDesignerForm .layui-form-item { + position: relative; +} + +#formDesignerForm .grid { + padding: 5px 5px; +} + +#formDesignerForm .layui-form-item:hover { + border : 1px solid #409EFF; + background-color: #e9f4fd !important; +} + +.widget-view-drag { + position : absolute; + left : -2px; + top : -2px; + bottom : -18px; + height : 28px; + line-height: 28px; + background : #409EFF; + z-index : 9; +} + +.widget-view-drag i { + font-size: 14px; + color : #fff; + margin : 0 5px; + cursor : move; +} + +.select-option-drag { + cursor: move; +} + +.select-option-delete { + cursor: pointer; +} + +.widget-view-action { + position : absolute; + right : 0; + bottom : 0; + height : 28px; + line-height: 28px; + background : #409EFF; + z-index : 9; +} + +.widget-view-action i { + font-size: 14px; + color : #fff; + margin : 0 5px; + cursor : pointer; + +} + +#formDesignerForm { + background: #fff; + border : 1px dashed #999; + min-height: 94%; + margin : 10px; + padding : 10px 10px; +} + +#formDesignerForm .widget-col-list { + min-height: 50px; + border : 1px dashed #ccc; + background: #fff; +} + +#formDesignerForm .widget-slider { + margin: 18px 10px; + width : 90%; + position: absolute!important; +} + +.layui-empty { + margin : 10px 60px; + color : #9e9e9e; + font-size : 16px; + text-align: center; + +} + +#columnProperty .layui-form-item.option { + margin-bottom: 2px; +} + +#columnProperty .layui-form-item.option .layui-inline { + margin-bottom: 2px; +} + +/* 图片上传 */ +.uploader-list { + margin-left: -15px; +} + +.uploader-list .info { + position : relative; + margin-top : -25px; + background-color: black; + color : white; + filter : alpha(Opacity=80); + -moz-opacity : 0.5; + opacity : 0.5; + width : 100px; + height : 25px; + text-align : center; + display : none; +} + +.uploader-list .handle { + position : relative; + background-color: black; + color : white; + filter : alpha(Opacity=80); + -moz-opacity : 0.5; + opacity : 0.5; + width : 100px; + text-align : right; + height : 18px; + margin-bottom : -18px; + display : none; +} + +.uploader-list .handle i { + margin-right: 5px; +} + +.uploader-list .handle i:hover { + cursor: pointer; +} + +.uploader-list .file-iteme { + margin : 12px 0 0 15px; + padding: 1px; + float : left; +} + + +/*自定义layer颜色*/ +body .cool-black .layui-layer-title { + color : #fff; + height : 50px; + line-height : 50px; + background-color: #191a23; + border : none; +} + +body .cool-black .layui-layer-setwin a { + color : #fff; + font-size : 16px; + font-style : normal; + font-family : layui-icon !important; + -webkit-font-smoothing : antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body .cool-black .layui-layer-btn a { + background: #333; +} + + + +.htmlcodeview, +.importjsoncodeview { + position: relative; + display : none; +} + +.htmlcodeview textarea, +.getFormData textarea, +.importjsoncodeview textarea { + display : block; + width : 760px; + height : 560px; + border : 10px solid #F8F8F8; + border-top-width: 0; + padding : 10px; + line-height : 20px; + overflow : auto; + background-color: #3F3F3F; + color : #eee; + font-size : 12px; + font-family : Courier New; +} + +.htmlcodeview a, +.importjsoncodeview a { + position: absolute; + right : 20px; + bottom : 20px; +} + +.aboutusview .about { + display : block; + width : 760px; + height : 554px; + padding : 20px 20px; + overflow : hidden; + background-color: #191a23; + color : #ccc; +} +.aboutusview .about p{ + line-height: 30px; + +} + +.aboutusview .about .yellow{ + color:#e6ec8d; +} + +.layui-disabled { + background-color: #f5f7fa; + border-color: #dfe4ed; + color: #c0c4cc; +} + +.custom-lg{ + margin: -3px 0px 0px 10px; +} +.custom-zc{ + margin: 0px 0px 0px 10px; +} +.custom-sm{ + margin: 5px 0px 0px 10px; +} +.custom-xs{ + margin: 10px 0px 0px 10px; +} + +.iceEditor-disabled { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(245,247,250,0.79) !important; + border-color: #dfe4ed !important; + color: #c0c4cc !important; + z-index: 1 !important; + display: block; +} \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/formDesigner.js b/module-form/src/main/resources/static/form-design/modules/formDesigner.js new file mode 100644 index 00000000..a35986a6 --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/formDesigner.js @@ -0,0 +1,4111 @@ +layui.config({ + base: './form-design/modules/' +}).define(["layer", "laytpl", "element", "form", "slider", "laydate", "rate", "colorpicker", "layedit", "carousel", "upload", "formField", "iconPicker", "cron", "labelGeneration"], function (exports) { + var $ = layui.jquery, + layer = layui.layer, + laytpl = layui.laytpl, + setter = layui.cache, + element = layui.element, + slider = layui.slider, + laydate = layui.laydate, + rate = layui.rate, + colorpicker = layui.colorpicker, + carousel = layui.carousel, + form = layui.form, + upload = layui.upload, + layedit = layui.layedit, + formField = layui.formField, + hint = layui.hint, + iconPicker = layui.iconPicker, + cron = layui.cron, + labelGeneration = layui.labelGeneration, + iceEditorObjects = {}, guid = function () { + var d = new Date().getTime(); + if (window.performance && typeof window.performance.now === "function") { + d += performance.now(); //use high-precision timer if available + } + var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = (d + Math.random() * 16) % 16 | 0; + d = Math.floor(d / 16); + return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); + }); + return uuid; + }, lang = { + id: "唯一标识", + label: "标题", + index: "序号", + tag: "表单类型", + tagIcon: '图标', + width: '宽度', + height: "高度", + span: '网格宽度', + placeholder: "placeholder", + defaultValue: "默认值", + dateDefaultValue: '默认时间', + labelWidth: "文本宽度", + clearable: "是否清楚", + prepend: "前缀", + append: "追加", + prefixIcon: '前缀图标', + suffixIcon: '后缀图标', + maxlength: "最大长度", + showWordLimit: "是否限制字符", + readonly: "只读", + disabled: "禁用", + required: "必填", + columns: "列数", + options: "选项", + switchValue: "默认值", + maxValue: "最大值", + minValue: "最小值", + dataMaxValue: "最大日期", + dataMinValue: "最小日期", + stepValue: "步长", + datetype: "日期类型", + dateformat: "日期格式", + half: "显示半星", + theme: "皮肤", + rateLength: "星星个数", + interval: "间隔毫秒", + startIndex: "开始位置", + full: "是否全屏", + arrow: "鼠标样式", + contents: "内容", + document: '帮助文档', + input: "输入框", + select: "下拉", + checkbox: "多选组", + radio: "单选组", + date: "日期", + editor: "iceEditor编辑器", + slider: "滑块", + image: "图片", + grid: "一行多列", + colorpicker: "颜色选择器", + textarea: "多行文本", + rate: "评分控件", + switch: "开关", + password: "密码框", + carousel: "轮播", + text: "显示文本", + uploadUrl: "上传路径", + expression: "验证", + file: "文件", + autoplay: "自动切换", + anim: "切换方式", + arrow: "切换箭头", + tab: "tab选项卡", + tabHeaders: "tab标题", + isInput: "显示输入框", + dateRange: "日期范围", + dateRangeDefaultValue: "默认范围", + menu: "头部菜单", + numberInput: "数字输入框", + iconPicker: "图标选择器", + iconPickerSearch: "是否搜索", + iconPickerPage: "是否分页", + iconPickerLimit: "显示数量", + iconPickerCellWidth: "图标宽度", + cron: "Cron表达式", + cronUrl: "运行路径", + labelGeneration: "标签组件", + isEnter: "是否回车", + buttonIcon: "按钮图标", + buttonType: "按钮类型", + isLabel: "显示标签", + buttonSize: "组件尺寸", + bottom: "按钮组件", + buttonVlaue: "按钮文字", + sign: "sign签名组件", + }, expressions = [{ + text: '默认', + value: "" + }, { + text: '数字', + value: 'number' + }, { + text: '邮箱', + value: 'email' + }, { + text: '手机', + value: 'phone' + }, { + text: '身份证', + value: 'identity' + }, { + text: '日期', + value: 'date' + }, { + text: '网址', + value: 'url' + }, { + text: '密码', + value: 'pass' + }], + anims = [{ + text: '左右切换', + value: 'default' + }, { + text: '上下切换', + value: 'updown' + }, { + text: '渐隐渐显切换', + value: 'fade' + }], + arrows = [{ + text: '悬停显示', + value: 'hover' + }, { + text: '始终显示', + value: 'always' + }, { + text: '始终不显示', + value: 'none' + }], + datetypes = [{ + text: '年选择器', + value: 'year' + }, { + text: '年月选择器', + value: 'month' + }, { + text: '时间选择器', + value: 'time' + }, { + text: '日期选择器', + value: 'date' + }, { + text: '日期时间选择器', + value: 'datetime' + }], + buttonTypes = [{ + text: '原始', + value: 'layui-btn-primary' + }, { + text: '默认', + value: "" + }, { + text: '百搭', + value: 'layui-btn-normal' + }, { + text: '暖色', + value: 'layui-btn-warm' + }, { + text: '警告', + value: ' layui-btn-danger' + }], + buttonSizes = [{ + text: '大型', + value: 'layui-btn-lg' + }, { + text: '默认', + value: "" + }, { + text: '小型', + value: 'layui-btn-sm' + }, { + text: '迷你', + value: 'layui-btn-xs' + }], + dateformats = ["yyyy年MM月", "yyyy-MM-dd", "dd/MM/yyyy", "yyyyMMdd", "yyyy-MM-dd HH:mm:ss", "yyyy年MM月dd日 HH时mm分ss秒"], + iceEditMenus = [{ + value: 'backColor', + text: '字体背景颜色' + }, { + value: 'fontSize', + text: '字体大小' + }, { + value: 'foreColor', + text: '字体颜色' + }, { + value: 'bold', + text: '粗体' + }, { + value: 'italic', + text: '斜体' + }, { + value: 'underline', + text: '下划线' + }, { + value: 'strikeThrough', + text: '删除线' + }, { + value: 'justifyLeft', + text: '左对齐' + }, { + value: 'justifyCenter', + text: '居中对齐' + }, { + value: 'justifyRight', + text: '右对齐' + }, { + value: 'indent', + text: '增加缩进' + }, { + value: 'outdent', + text: '减少缩进' + }, { + value: 'insertOrderedList', + text: '有序列表' + }, { + value: 'insertUnorderedList', + text: '无序列表' + }, { + value: 'superscript', + text: '上标' + }, { + value: 'subscript', + text: '下标' + }, { + value: 'createLink', + text: '创建连接' + }, { + value: 'unlink', + text: '取消连接' + }, { + value: 'hr', + text: '水平线' + }, { + value: 'face', + text: '表情' + }, { + value: 'table', + text: '表格' + }, { + value: 'files', + text: '附件' + }, { + value: 'music', + text: '音乐' + }, { + value: 'video', + text: '视频' + }, { + value: 'insertImage', + text: '图片' + }, { + value: 'removeFormat', + text: '格式化样式' + }, { + value: 'code', + text: '源码' + }, { + value: 'line', + text: '菜单分割线' + }], + // 配置属性 + renderCommonProperty = function (json) { + var _html = ''; + for (var key in json) { + if (key === 'index') { + continue; + } + if (key === 'tag' || key === 'id' || key === 'uploadUrl' || key === 'document' || key === 'interval' || key === 'cronUrl') { //只读字段 + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + if (key === 'tag') { + _html += ' '.format(key, json[key] == undefined ? '' : json[key]); + } else { + _html += ' '.format(key, json[key] == undefined ? '' : json[key]); + } + _html += '
'; + _html += '
'; + } else if (key === 'readonly' || key === 'disabled' || key === 'required' || key === 'half' || key === "text" || key === "autoplay" || key === "full" || key === "verification" || key === 'autoplay' || key === 'isInput' || key === 'expression' || key === 'iconPickerSearch' || key === 'iconPickerPage' || key === 'isEnter' || key === 'isLabel') { + var yes = "是"; + var no = "否"; + if (key === 'isInput') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(json[key] ? 'checked' : '', key, yes, no); + _html += '
'; + _html += '
'; + } + if (key === 'autoplay' || key === 'iconPickerSearch' || key === 'iconPickerPage') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(json[key] ? 'checked' : '', key, yes, no); + _html += '
'; + _html += '
'; + } + if (key === 'readonly') { + yes = "只读"; + no = "可写"; + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(json[key] ? 'checked' : '', key, yes, no); + _html += '
'; + _html += '
'; + } + if (key === 'isEnter' || key === 'isLabel') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(json[key] ? 'checked' : '', key, yes, no); + _html += '
'; + _html += '
'; + } + if (key === 'disabled') { + yes = "隐藏"; + no = "显示"; + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(json[key] ? 'checked' : '', key, yes, no); + _html += '
'; + _html += '
'; + } + if (key === 'required') { + yes = "必填"; + no = "可选"; + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(json[key] ? 'checked' : '', key, yes, no); + _html += '
'; + _html += '
'; + } + if (key === 'expression') { + _html += '
'; + _html += ' '; + _html += '
'; + _html += '' + _html += '
'; + _html += '
'; + } + } else if (key === 'defaultValue' || key === 'label' || key === 'height' || key === 'placeholder' || key === 'document' || key === 'minValue' || key === 'maxValue' || key === 'rateLength' || key === 'iconPickerLimit' || key === 'iconPickerCellWidth' || key === 'buttonVlaue') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(key, json[key] == undefined ? '' : json[key], lang[key]); + _html += '
'; + _html += '
'; + } else if (key === 'stepValue') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(key, json[key] == undefined ? '' : json[key], lang[key]); + _html += '
'; + _html += '
'; + } else if (key === 'width' || key === 'labelWidth') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += '
'.format(key); + _html += ' '.format(key + "-value", '', lang[key]); + _html += '
'; + _html += '
'; + } else if (key === 'menu') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(key, '', lang[key]); + _html += '
'; + _html += '
'; + } else if (key === 'switchValue') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' '.format(key, json[key] ? 'checked' : ''); + _html += '
'; + _html += '
'; + } else if (key === 'datetype') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += '' + _html += '
'; + _html += '
'; + } else if (key === 'dateformat') { + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += '' + _html += '
'; + _html += '
'; + } else if (key === 'contents') { + //处理 + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' ' + //_html += ' ' + _html += '
'; + _html += '
'; + _html += '
'.format(json.tag); + //选项 + for (var i = 0; i < json.contents.length; i++) { + _html += '
'.format(i); + _html += '
'; + _html += ' '.format(json.tag, json.contents[i]); + _html += '
'; + _html += '
'; + _html += ' '; + _html += ' '; + _html += '
'; + _html += '
'; + //向 .option .layui-inline 添加drag事件并且必须设在 contents-option-drag 中才能拖动 + } + _html += '
'; + } else if (key === 'options') { + //处理 + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += ' ' + //_html += ' ' + _html += '
'; + _html += '
'; + _html += '
'.format(json.tag); + //选项 + for (var i = 0; i < json.options.length; i++) { + _html += '
'.format(i); + _html += '
'; + if (json.tag === 'checkbox') { + if (json.options[i].checked) { + _html += ' '.format(json.tag); + } else { + _html += ' '.format(json.tag); + } + } else { + if (json.options[i].checked) { + _html += ' '.format(json.tag); + } else { + _html += ' '.format(json.tag); + } + } + _html += '
'; + _html += '
'; + _html += ' '.format(json.tag, json.options[i].text); + _html += '
'; + _html += '
'; + _html += ' '.format(json.tag, json.options[i].value); + _html += '
'; + _html += '
'; + _html += ' '; + _html += ' '; + _html += '
'; + _html += '
'; + //向 .option .layui-inline 添加drag事件并且必须设在 select-option-drag 中才能拖动 + } + _html += '
'; + } else if (key === 'columns') { + var columnCount = 2; + columnCount = json[key].length; + //处理 + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += '' + _html += '
'; + _html += '
'; + } else if (key === 'anim') { + //处理 + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += '' + _html += '
'; + _html += '
'; + } else if (key === 'arrow') { + //处理 + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += '' + _html += '
'; + _html += '
'; + } else if (key === 'buttonType') { + //处理 + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += '' + _html += '
'; + _html += '
'; + } else if (key === 'buttonSize') { + //处理 + _html += '
'; + _html += ' '.format(lang[key]); + _html += '
'; + _html += '' + _html += '
'; + _html += '
'; + } else if (key === 'dataMaxValue' || key === 'dataMinValue') { + _html += '
'.format(key + json.id); + _html += ''.format(lang[key]); + _html += '
'; + _html += '
'.format(key + json.tag + json.id); + _html += '
'; + _html += '
'; + } else if (key === 'dateDefaultValue') { + _html += '
'.format(key + json.id); + _html += ''.format(lang[key]); + _html += '
'; + _html += '
'.format(key + json.tag + json.id); + _html += '
'; + _html += '
'; + } else if (key === 'dateRangeDefaultValue') { + _html += '
'.format(key + json.id); + _html += ''.format(lang[key]); + _html += '
'; + _html += '
'.format(key + json.tag + json.id); + _html += '
'; + _html += '
'; + } else if (key === 'buttonIcon') { + _html += '
'.format(key + json.id); + _html += ''.format(lang[key]); + _html += '
'; + _html += '
'.format(json.tag + json.id + "property"); + _html += '
'; + _html += '
'; + } + } + return _html; + } + //模块名称常量 + , MOD_NAME = 'formDesigner', + ELEM = '.layui-form-designer', + TP_MAIN = [ + '
', + '
', + ' ', + ' ', + '
    ', + '
    • ', + '
', + ' ', + '
', + '
', + '
', + ' ', + '
', + '
    ', + '
  • 组件
    • ', + '
', + '
', + '
', + '
', + '
', + '
', + '
开发中...
', + '
', + '
', + '
', + '
', + '
', + ' ', + '
', + '
', + '
', + '从左侧拖拽控件到此设计区域来添加字段', + '
', + '
', + ' ', + '
', + '
', + '
', + '
', + ' ', + '
', + '
', + '
    ', + '
  • 字段设置
    • ', + '
  • 表单设置
    • ', + '
', + '
', + '
', + '
', + '
', + ' ', + '
', + ' ', + '
', + ' ', + '
', + '
', + ' ', + ' ', + '
', + ' ', + '
', + ' ', + '
', + '
', + ' ', + '
', + '
', + '
', + '
', + '
', + '
', + '
' + ].join(''), + TP_HTML_VIEW = [ + '' + ].join(''), + TP_IMPORT_VIEW = [ + '' + ].join(''), + TP_ABOUT_VIEW = [''].join(''), + //外部接口 + formDesigner = { + index: layui.formDesigner ? (layui.formDesigner.index + 10000) : 0, + //设置全局项 + set: function (options) { + var that = this; + that.config = $.extend({}, that.config, options); + return that; + }, + //事件监听 + on: function (events, callback) { + return layui.onevent.call(this, MOD_NAME, events, callback); + } + }, + /** + * 操作当前实例elem + * id 表示当前实例的索引 默认就是内部的 index，如果id存在值 那么就从已经存在的获取 + */ + thisIns = function () { + var that = this, + options = that.config; + return { + reload: function (options) { + that.reload.call(that, options); + }, + getOptions: function () { + return options || null; + }, + getData: function () { + return options.data || null; + }, + geticeEditorObjects: function () { + return iceEditorObjects || null; + } + } + }, getThisInsConfig = function (id) { + var config = thisIns.config[id]; + if (!config) { + hint.error('在表实例中找不到ID选项'); + } + return config || null; + }, Class = function (options) { + var that = this; + that.index = ++formDesigner.index; //增加实例，index 也是要增加JSON.stringify(options.data, null, 4) + that.config = $.extend({}, that.config, formDesigner.config, options); + that.render(); + }; + /* 此方法最后一道 commom.js 中 */ + String.prototype.format = function (args) { + var result = this; + if (arguments.length > 0) { + if (arguments.length == 1 && typeof (args) == "object") { + for (var key in args) { + if (args[key] != undefined) { + var reg = new RegExp("({" + key + "})", "g"); + result = result.replace(reg, args[key]); + } + } + } else { + for (var i = 0; i < arguments.length; i++) { + if (arguments[i] != undefined) { + var reg = new RegExp("({[" + i + "]})", "g"); + result = result.replace(reg, arguments[i]); + } + } + } + } + return result; + } + Class.prototype.findJsonItem = function (json, id) { + var that = this, + options = that.config; + for (var i = 0; i < json.length; i++) { + if (json[i].id === id) { + return json[i]; + } else { + if (json[i].tag === 'grid') { + for (var j = 0; j < json[i].columns.length; j++) { + if (json[i].columns[j].list.length > 0) { + var _item = that.findJsonItem(json[i].columns[j].list, id); + if (_item) { + return _item; + } + } + } + } + } + } + } + /* 删除json中的文件并返回上一个节点*/ + Class.prototype.deleteJsonItem = function (json, id) { + var that = this, + options = that.config; + for (var i = 0; i < json.length; i++) { + if (json[i].id === id) { + json.splice(i, 1); + if (i > 0) { + return json[i - 1]; + } + break; + } else { + if (json[i].tag === 'grid') { + for (var j = 0; j < json[i].columns.length; j++) { + if (json[i].columns[j].list.length > 0) { + that.deleteJsonItem(json[i].columns[j].list, id); + } + } + } + } + } + return undefined; + }; + Class.prototype.copyJsonAfterItem = function (json, id) { + var that = this, + options = that.config; + for (var i = 0; i < json.length; i++) { + if (json[i].id === id) { + var _newjson = JSON.parse(JSON.stringify(json[i])); + _newjson.id = that.autoId(_newjson.tag); + json.splice(i + 1, 0, _newjson); + return json[i]; + } else { + if (json[i].tag === 'grid') { + for (var j = 0; j < json[i].columns.length; j++) { + if (json[i].columns[j].list.length > 0) { + var _item = that.copyJsonAfterItem(json[i].columns[j].list, id); + if (_item) { + return _item; + } + } + } + } + } + } + return undefined; + }; + /** + * data 表示设计区数据 + * dataSource 表示数据源即一个控件的数据来源 + * + */ + Class.prototype.config = { + version: "1.0", + formName: "表单设计器", + Author: "WenG", + formId: "id", + generateId: 0, + field: [], + data: [], + dataSource: {}, + selectItem: undefined, + htmlCode: { + css: '', + html: '', + script: '' + } + }; + /* 自动生成ID 当前页面自动排序*/ + Class.prototype.autoId = function (tag) { + var that = this, + options = that.config; + options.generateId = options.generateId + 1; + return tag + '_' + options.generateId; + } + /* 组件定义 */ + Class.prototype.components = { + input: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var _required = json.required ? 'required' : ''; + if (json.expression !== null && json.expression !== undefined) { + if (json.expression !== '') { + _required = _required + '|' + json.expression; + } + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.labelWidth); + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass); + _html += '
'; + // if(selected){ + // _html +='
'; + // } + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var _required = json.required ? 'required' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + if (json.expression !== null && json.expression !== undefined) { + if (json.expression !== '') { + _required = 'required' + '|' + json.expression; + } + } + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + if (json.required) { + $label.append('*'); + } + $label.append(json.label + ":"); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass); + $block.append(_html); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.input)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + bottom: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _coustomCss = ""; + if (json.buttonSize === "layui-btn-lg") { + _coustomCss = "custom-lg"; + } + if (json.buttonSize === "") { + _coustomCss = "custom-zc"; + } + if (json.buttonSize === "layui-btn-sm") { + _coustomCss = "custom-sm"; + } + if (json.buttonSize === "layui-btn-xs") { + _coustomCss = "custom-xs"; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + if (json.isLabel) { + _html += ''.format(json.label, json.labelWidth); + } + _html += '
'; + if (json.disabled) { + _html += ''.format(json.id + json.tag, json.buttonSize, _coustomCss, json.buttonIcon, json.buttonVlaue); + } else { + _html += ''.format(json.id + json.tag, json.buttonSize, json.buttonType, _coustomCss, json.buttonIcon, json.buttonVlaue); + } + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + if (json.isLabel) { + if ($('#' + json.id).find("label").length === 0) { + $('#' + json.id).prepend(''.format(json.label, json.labelWidth)); + } else { + $label.css("width", json.labelWidth + "px"); + } + $label.empty(); + $label.append(json.label + ":"); + } else { + $label.remove(); + $block.css("margin-left", "0px"); + } + $block.empty(); + var _html = ''; + var _coustomCss = ""; + if (json.buttonSize === "layui-btn-lg") { + _coustomCss = "custom-lg"; + } + if (json.buttonSize === "") { + _coustomCss = "custom-zc"; + } + if (json.buttonSize === "layui-btn-sm") { + _coustomCss = "custom-sm"; + } + if (json.buttonSize === "layui-btn-xs") { + _coustomCss = "custom-xs"; + } + //重绘设计区改id下的所有元素 + if (json.disabled) { + _html += ''.format(json.id + json.tag, json.buttonSize, _coustomCss, json.buttonIcon, json.buttonVlaue); + } else { + _html += ''.format(json.id + json.tag, json.buttonSize, json.buttonType, _coustomCss, json.buttonIcon, json.buttonVlaue); + } + $block.append(_html); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.bottom)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + sign: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.labelWidth); + if (json.disabled) { + _html += ''.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue); + } else { + _html += ''.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue); + } + if (json.data !== "") { + _html += '
'.format(json.data); + } + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $label.append(json.label + ":"); + $block.css({ + width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) + }); + var _html = ''; + //重绘设计区改id下的所有元素 + if (json.disabled) { + _html += ''.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue); + } else { + _html += ''.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue); + } + if (json.data !== "") { + _html += '
'.format(json.data); + } + $block.append(_html); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.sign)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + iconPicker: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.labelWidth); + if (json.disabled) { + _html += '
'; + } + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _disabledClass, json.tag + json.id); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $label.empty(); + $block.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $label.append(json.label + ":"); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _disabledClass, json.tag + json.id); + $('#' + json.id + ' .layui-input-block').append(_html); + iconPicker.render({ + // 选择器，推荐使用input + elem: '#' + json.tag + json.id, + // 数据类型：fontClass/unicode，推荐使用fontClass + type: 'fontClass', + // 是否开启搜索：true/false，默认true + search: json.iconPickerSearch, + // 是否开启分页：true/false，默认true + page: json.iconPickerPage, + // 每页显示数量，默认12 + limit: json.iconPickerLimit, + // 每个图标格子的宽度：'43px'或'20%' + cellWidth: json.iconPickerCellWidth, + // 点击回调 + click: function (data) { + //console.log(data); + }, + // 渲染成功后的回调 + success: function (d) { + //console.log(d); + } + }); + iconPicker.checkIcon(json.tag + json.id, json.defaultValue); + if (json.disabled) { + $("#" + json.id).find(".layui-input-block").append('
'); + } else { + $("#" + json.id).find(".iceEditor-disabled").remove(); + } + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.iconPicker)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + cron: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _required = json.required ? 'required' : ''; + var _width = json.width.replace(/[^\d]/g, ''); + if ('' != _width) { + _width = 100 - parseInt(_width); + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.placeholder, _disabled, _disabledClass, json.tag + json.id, _required); + if (!json.disabled) { + _html += ''.format(json.tag + json.id); + } + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _required = json.required ? 'required' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $block.css({ + width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) + }); + if (json.required) { + $label.append('*'); + } + $label.append(json.label + ":"); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.placeholder, _disabled, _disabledClass, json.tag + json.id, _required); + if (!json.disabled) { + var _width = json.width.replace(/[^\d]/g, ''); + if ('' != _width) { + _width = 100 - parseInt(_width); + } + _html += ''.format(json.tag + json.id); + $block.append(_html); + cron.render({ + elem: "#" + json.tag + json.id + "-button", // 绑定元素 + url: json.cronUrl, // 获取最近运行时间的接口 + // value: $("#cron").val(), // 默认值 + done: function (cronStr) { + $("#" + json.tag + json.id).val(cronStr); + }, + }); + } else { + $block.append(_html); + } + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.cron)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + numberInput: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $label.append(json.label + ":"); + $block.css({ + width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) + }); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id); + $block.append(_html); + var _width = json.width.replace(/[^\d]/g, ''); + if ('' != _width) { + _width = 100 - parseInt(_width); + } + $('#' + json.id + ' .layui-input-block .layui-number-input-btn').css("right", _width + "%"); + if (json.disabled) { + $('#' + json.id + ' .layui-input-block .layui-number-input-btn').css("z-index", "-1"); + } + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.numberInput)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + labelGeneration: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + if (json.disabled) { + _html += '
'; + } + _html += '
'.format(json.tag + json.id, json.width); + _html += '
'; + // if(selected){ + // _html +='
'; + // } + _html += '
'; + return _html; + }, + update: function (json) { + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $label.append(json.label + ":"); + $block.css({ + width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) + }); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += '
'.format(json.tag + json.id, json.width); + $block.append(_html); + labelGeneration.render({ + elem: '#' + json.tag + json.id, + data: json.dateDefaultValue, + isEnter: json.isEnter + }); + if (json.disabled) { + $("#" + json.id).find(".layui-input-block").append('
'); + } else { + $("#" + json.id).find(".iceEditor-disabled").remove(); + } + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.labelGeneration)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + password: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var _required = json.required ? 'lay-verify="required"' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.labelWidth); + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var _required = json.required ? 'lay-verify="required"' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + if (json.required) { + $label.append('*'); + } + $label.append(json.label + ":"); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass); + $block.append(_html); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.password)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + select: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.id, json.labelWidth); + _html += '' + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'required' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + var _html = ''; + _html += '' + $('#' + json.id + ' .layui-input-block').append(_html); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + if (json.required) { + $label.append('*'); + } + $label.append(json.label + ":"); + form.render('select', json.id); + $('#' + json.id + ' .layui-input-block div.layui-unselect.layui-form-select').css({ + width: '{0}'.format(json.width) + }); + $block.css({ + width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) + }); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.select)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + radio: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.labelWidth); + for (var i = 0; i < json.options.length; i++) { + if (json.options[i].checked) { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled); + } else { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled); + } + } + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $label.append(json.label + ":"); + $block.css({ + width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) + }); + var _html = ''; + //重绘设计区改id下的所有元素 + for (var i = 0; i < json.options.length; i++) { + if (json.options[i].checked) { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled); + } else { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled); + } + } + $block.append(_html); + form.render('radio'); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.radio)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + checkbox: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'lay-verify="otherReq"' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + for (var i = 0; i < json.options.length; i++) { + if (json.options[i].checked) { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required); + } else { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required); + } + } + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'lay-verify="otherReq"' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + var _html = ''; + //重绘设计区改id下的所有元素 + for (var i = 0; i < json.options.length; i++) { + if (json.options[i].checked) { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required); + } else { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required); + } + } + $block.append(_html); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + if (json.required) { + $label.append('*'); + } + $label.append(json.label + ":"); + form.render('checkbox'); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.checkbox)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + switch: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += ''.format(json.id, _disabled, _disabledClass, json.switchValue ? 'checked' : ''); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + var _html = ''; + _html += ''.format(json.tag, _disabled, _disabledClass, json.switchValue ? 'checked' : ''); + $block.append(_html); + $label.append(json.label + ":"); + $block.css({ + width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) + }); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + form.render('checkbox'); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.switch)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + slider: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += '
'.format(json.tag + json.id); + _html += ''.format(json.id, json.defaultValue); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $label.append(json.label + ":"); + $block.css({ + width: 'calc({0} - {1}px'.format(json.width, json.labelWidth) + }); + slider.render({ + elem: '#' + json.tag + json.id, + value: json.defaultValue, //初始值 + min: json.minValue, + max: json.maxValue, + step: json.stepValue, + disabled: json.disabled, + input: json.isInput, + }); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.slider)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + dateRange: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _disabledStyle = json.disabled ? ' pointer-events: none;' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += '
'; + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.tag + json.id, _disabledStyle); + _html += '
'; + _html += ''.format(json.tag + json.id, _disabledClass, json.id, _required); + _html += '
'; + _html += '
-
'; + _html += '
'; + _html += ''.format(json.tag + json.id, _disabledClass, json.id, _required); + _html += '
'; + _html += '
'; + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _disabledStyle = json.disabled ? ' pointer-events: none;' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'; + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.tag + json.id, _disabledStyle); + _html += '
'; + _html += ''.format(json.tag + json.id, _disabledClass, json.id, _required); + _html += '
'; + _html += '
-
'; + _html += '
'; + _html += ''.format(json.tag + json.id, _disabledClass, json.id, _required); + _html += '
'; + _html += '
'; + _html += '
'; + $('#' + json.id).empty(); + $('#' + json.id).append(_html); + laydate.render({ + elem: '#' + json.tag + json.id, + type: json.datetype, + format: json.dateformat, + //value: item.dateDefaultValue, + min: json.dataMinValue, + max: json.dataMaxValue, + range: ['#start-' + json.tag + json.id, '#end-' + json.tag + json.id] + }); + if (json.dateRangeDefaultValue !== null && json.dateRangeDefaultValue !== "" && json.dateRangeDefaultValue !== undefined) { + var split = json.dateRangeDefaultValue.split(" - "); + $('#start-' + json.tag + json.id).val(split[0]); + $('#end-' + json.tag + json.id).val(split[1]); + } + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.dateRange)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + date: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _disabledStyle = json.disabled ? ' pointer-events: none;' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += ''.format(json.tag + json.id, _disabledClass, _disabledStyle, _required); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _disabledStyle = json.disabled ? ' pointer-events: none;' : ''; + var _required = json.required ? 'required' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + if (json.required) { + $label.append('*'); + } + $label.append(json.label + ":"); + $block.css({ + width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) + }); + var _html = ''.format(json.tag + json.id, _disabledClass, _disabledStyle, _required); + $block.append(_html); + laydate.render({ + elem: '#' + json.tag + json.id, + btns: ['confirm'], + type: json.datetype, + format: json.dateformat, + value: json.dateDefaultValue, + min: json.dataMinValue, + max: json.dataMaxValue, + }); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.date)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + rate: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _readonly = json.readonly ? 'readonly=""' : ''; + var _required = json.required ? 'required=""' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.labelWidth); + _html += '
'.format(json.labelWidth); + _html += '
'.format(json.tag + json.id); + _html += ''.format(json.id, json.defaultValue); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $label.append(json.label + ":"); + rate.render({ + elem: '#' + json.tag + json.id, + value: json.defaultValue, + text: json.text, + length: json.rateLength, + half: json.half, + readonly: json.readonly + }); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.rate)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + carousel: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + // _html +=''.format(json.required?'layui-form-required':'',json.label); + // _html +='
'; + _html += ''; //end for class=layui-carousel + // _html +='
'; + _html += '
'; + return _html; + }, + update: function (json) { + $('#' + json.id).empty(); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += ''; //end for class=layui-carousel + $('#' + json.id).append(_html); + carousel.render({ + elem: '#' + json.tag + json.id, + width: json.width, //设置容器宽度 + height: json.height, //设置容器宽度 + arrow: json.arrow, //始终显示箭头 + interval: json.interval, + anim: json.anim, + autoplay: json.autoplay + //anim: 'updown' //切换动画方式 + }); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.carousel)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + colorpicker: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.labelWidth); + if (json.disabled) { + _html += '
'; + } + _html += '
'.format(json.tag + json.id); + _html += ''.format(json.id, json.defaultValue); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $label.empty(); + $block.css("margin-left", json.labelWidth); + $label.css("width", json.labelWidth); + $label.append(json.label + ":"); + if (json.disabled) { + $("#" + json.id).find(".layui-input-block").append('
'); + } else { + $("#" + json.id).find(".iceEditor-disabled").remove(); + } + colorpicker.render({ + elem: '#' + json.tag + json.id, + color: json.defaultValue, + format: 'rgb', + predefine: true, + alpha: true, + done: function (color) { + $("#" + json.id).find("input[name=" + json.id + "]").val(color); + } + }); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.colorpicker)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + image: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label); + _html += '
'; + _html += '
'; + _html += ''.format(json.tag + json.id); + _html += '
预览图：'; + _html += '
'.format(json.id); + _html += '
'; + _html += '
'; + _html += '
'; + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.image)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + textarea: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'lay-verify="required"' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.width); + _html += '
'.format(json.width); + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'lay-verify="required"' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var $block = $('#' + json.id + ' .layui-input-block'); + var $label = $('#' + json.id + ' .layui-form-label'); + $block.empty(); + $label.empty(); + var _html = ''; + _html += ''.format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly); + $('#' + json.id + ' .layui-input-block').append(_html); + $label.css({ + width: '{0}'.format(json.width) + }); + $block.css({ + width: '{0}'.format(json.width) + }); + if (json.required) { + $label.append('*'); + } + $label.append(json.label + ":"); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.textarea)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + editor: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index, json.width); + _html += ''.format(json.label, json.width); + _html += '
'; + _html += '
'.format(json.tag + json.id); + _html += '
'; + // if(selected){ + // _html +='
'; + // } + _html += '
'; + return _html; + }, + update: function (json) { + var $label = $('#' + json.id + ' .layui-form-label'); + $label.empty(); + $label.css("width", json.width); + $label.append(json.label + ":"); + var e = iceEditorObjects[json.id]; + e.width = json.width; //宽度 + e.height = json.height; //高度 + e.uploadUrl = json.uploadUrl; //上传文件路径 + e.disabled = json.disabled; + e.menu = json.menu; + e.create(); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.editor)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + grid: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + + var colClass = 'layui-col-md6'; + if (json.columns.length == 3) { + colClass = 'layui-col-md4'; + } else if (json.columns.length == 4) { + colClass = 'layui-col-md3'; + } else if (json.columns.length == 6) { + colClass = 'layui-col-md2'; + } + for (var i = 0; i < json.columns.length; i++) { + _html += '
'.format(i, json.index, colClass, json.id); + //some html + _html += '
'; + } + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID 默认是一个一行两列的布局对象 + var _json = JSON.parse(JSON.stringify(formField.grid)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + if (columncount > 2) { + var _col = { + span: 12, + list: [], + }; + for (var i = _json.columns.length; i < columncount; i++) { + _json.columns.splice(i, 0, _col); + } + } + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + //如果存在 option 那么向 .option .layui-inline 添加drag事件并且必须设在 select-option-drag 中才能拖动 + } + }, + file: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label); + _html += '
'; + _html += '
'; + _html += ' '.format(json.tag + json.id); + _html += '
'; + _html += ''; + _html += ''; + _html += '
文件名大小上传进度操作
'.format(json.id); + _html += ''.format(json.id); + _html += '
'; + _html += ''; + _html += '
'; + _html += '
'; + _html += ''; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.file)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json); //获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + } + $('#columnProperty').append(_html); + } + }, + }; + /* 如果是grid布局控件 就显示不一样的样式 */ + Class.prototype.addClick = function (evt) { + var that = this, options = that.config; + $("#formDesignerForm .layui-form-item").on('click', function (e) { + //当 div 为嵌套关系的时候 阻止事件冒泡 + e.preventDefault(); + e.stopPropagation(); + // console.log("您点击了 formDesignerForm .layui-form-item"); + var index = parseInt($(this)[0].dataset.index); + var _id = $(this)[0].dataset.id; + options.selectItem = that.findJsonItem(options.data, _id); + var tag = $(this)[0].dataset.tag; + //显示当前的属性 + that.components[tag].property(options.selectItem); + if (options.selectItem.tag === "select" || options.selectItem.tag === "checkbox" || options.selectItem.tag === "radio") { + var sortable = Sortable.create(document.getElementById(options.selectItem.tag), { + group: { + name: 'propertygroup', + }, + ghostClass: "ghost", + handle: '.select-option-drag', + dataIdAttr: 'data-index', + animation: 150, + onEnd: function (evt) { + if (options.selectItem === undefined) { + return; + } + var indexArray = sortable.toArray(); + var newJson = []; + for (var i = 0; i < indexArray.length; i++) { + newJson.push(options.selectItem.options[indexArray[i]]); + } + options.selectItem.options = newJson; + that.renderForm(); + } + }); + } + that.bindPropertyEvent(); + //移除其他元素的 siblings() 方法返回被选元素的所有同级元素 + // $(this).siblings('div').removeClass('active'); + //移除 #formDesignerForm .layui-form-item 下所有的 active + $('#formDesignerForm .layui-form-item').removeClass('active'); + //给当前元素增加class + $(this).addClass('active'); + var _draghtml1 = '
'; + var len = $(this).children().length; + if (len <= 12) { + //先删除元素 + $("#formDesignerForm .layui-form-item .widget-view-action").remove(); + $("#formDesignerForm .layui-form-item .widget-view-drag").remove(); + // console.log("显示子节点"); + // console.log($(this).children()); + if ($('#widget-view-action')) { //已存在 + $('#widget-view-action').remove(); + } + $(this).children(len - 1).after(_draghtml1); + } + /* 向 拷贝 删除 按钮添加 click 动作 */ + that.addCopyDeleteClick(); + //重新渲染 + form.render(); + if (options.data.length != 0) { + for (var i = 0; i < options.data.length; i++) { + if (options.data[i].tag === 'grid') { + for (var j = 0; j < options.data[i].columns.length; j++) { + for (var k = 0; k < options.data[i].columns[j].list.length; k++) { + if (options.data[i].columns[j].list[k].tag === 'select') { + $('#' + options.data[i].columns[j].list[k].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({ + width: '{0}'.format(options.data[i].columns[j].list[k].width) + }); + } + } + } + } else { + if (options.data[i].tag === 'select') { + $('#' + options.data[i].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({ + width: '{0}'.format(options.data[i].width) + }); + } + } + } + } + }); + }; + /* 给字段属性绑定事件 实现双向绑定？*/ + Class.prototype.bindPropertyEvent = function (_json) { + var that = this, + options = that.config; + if (options.data === undefined) { + return; + } + if (typeof (options.data) === 'string') { + options.data = JSON.parse(options.data); + } + var _property = $('#columnProperty'); + var _columns = _property.find('input,textarea,select,checkbox'); + var _json = options.selectItem; + //没有可以选择的 + if (_json === undefined) { + return; + } + laydate.render({ + elem: '#dataMaxValue' + _json.tag + _json.id, + format: 'yyyy-MM-dd', + btns: ['now', 'confirm'], + value: _json.dataMaxValue, + done: function (value, date, endDate) { + _json.dataMaxValue = value; + that.components[_json.tag].update(_json); + } + }); + laydate.render({ + elem: '#dataMinValue' + _json.tag + _json.id, + format: 'yyyy-MM-dd', + btns: ['now', 'confirm'], + value: _json.dataMinValue, + done: function (value, date, endDate) { + _json.dataMinValue = value; + that.components[_json.tag].update(_json); + } + }); + laydate.render({ + elem: '#dateDefaultValue' + _json.tag + _json.id, + type: _json.datetype, + format: _json.dateformat, + value: _json.dateDefaultValue, + done: function (value, date, endDate) { + _json.dateDefaultValue = value; + that.components[_json.tag].update(_json); + } + }); + laydate.render({ + elem: '#dateRangeDefaultValue' + _json.tag + _json.id, + type: _json.datetype, + format: _json.dateformat, + value: _json.dateRangeDefaultValue, + range: "-", + done: function (value, date, endDate) { + _json.dateRangeDefaultValue = value; + that.components[_json.tag].update(_json); + } + }); + iconPicker.render({ + // 选择器，推荐使用input + elem: '#' + _json.tag + _json.id + "property", + // 数据类型：fontClass/unicode，推荐使用fontClass + type: 'fontClass', + // 是否开启搜索：true/false，默认true + search: true, + // 是否开启分页：true/false，默认true + page: true, + // 每页显示数量，默认12 + limit: 12, + // 每个图标格子的宽度：'43px'或'20%' + cellWidth: '43px', + // 点击回调 + click: function (data) { + _json.buttonIcon = data.icon; + that.components[_json.tag].update(_json); + }, + // 渲染成功后的回调 + success: function (d) { + //console.log(d); + } + }); + iconPicker.checkIcon(_json.tag + _json.id + "property", ''); + if (_json.width !== undefined) { + //定义初始值 + slider.render({ + elem: '#width', + value: _json.width.replace("%", ""), //初始值 + min: 20, + max: 100, + step: 1, + input: true, + change: function (value) { + _json.width = value + "%"; + that.components[_json.tag].update(_json); + } + }); + } + if (_json.labelWidth !== undefined) { + //定义初始值 + slider.render({ + elem: '#labelWidth', + value: _json.labelWidth, //初始值 + min: 80, + max: 300, + step: 1, + input: true, + change: function (value) { + _json.labelWidth = value; + that.components[_json.tag].update(_json); + } + }); + } + $('#menu').click(function () { + layer.open({ + type: 2, + title: '头部菜单', + btn: ['保存', '关闭'], //可以无限个按钮 + yes: function (index, layero) { + //do something + var iframe = window['layui-layer-iframe' + index]; + var checkData = iframe.getCheckData(); + _json.menu = checkData; + that.components[_json.tag].update(_json); + layer.close(index); //如果设定了yes回调，需进行手工关闭 + }, + btn2: function (index, layero) { + layer.close(index); + }, + closeBtn: 1, //不显示关闭按钮 + shade: [0], + area: ['80%', '80%'], + offset: 'auto', //右下角弹出 + anim: 2, + content: ['./editorMenu.html', 'yes'], //iframe的url，no代表不显示滚动条 + success: function (layero, index) { + var iframe = window['layui-layer-iframe' + index]; + iframe.child(iceEditMenus) + } + }); + }); + form.on('checkbox', function (data) { + //data.elem.closest('.layui-form-item') + if (_json.tag === 'checkbox') { + var _index = parseInt($("#" + _json.id + " .layui-input-block div.layui-form-checkbox").index(data.othis[0])); + if ($(data.othis[0]).parent().parent().parent().attr("id") === 'checkbox') { + _index = parseInt($(data.othis[0]).parent().parent().attr("data-index")); + } + for (var i = 0; i < _json.options.length; i++) { + if (i === _index) { + _json.options[i].checked = data.elem.checked; + break; + } + } + that.components[_json.tag].update(_json); + } + }); + form.on('radio', function (data) { + //data.elem.closest('.layui-form-item') + if (_json.tag === 'radio') { + var _index = parseInt($("#" + _json.id + " .layui-input-block div.layui-form-radio").index(data.othis[0])); + if ($(data.othis[0]).parent().parent().parent().attr("id") === 'radio') { + _index = parseInt($(data.othis[0]).parent().parent().attr("data-index")); + } + for (var i = 0; i < _json.options.length; i++) { + if (i === _index) { + _json.options[i].checked = true; + continue; + } + _json.options[i].checked = false; + } + that.components[_json.tag].update(_json); + } else if (_json.tag === 'select') { + var _index = parseInt(data.elem.closest('.layui-form-item').dataset.index); + for (var i = 0; i < _json.options.length; i++) { + if (i === _index) { + _json.options[i].checked = true; + continue; + } + _json.options[i].checked = false; + } + that.components[_json.tag].update(_json); + } + }); + form.on('select', function (data) { + var _key = data.elem.name; + var _value = parseInt(data.value); + var _json = options.selectItem; + if (_key === 'columns') { + var columnCount = _json[_key].length; + var nullJson = { + span: 12, + list: [] + }; + if (_value > columnCount) { + for (var i = columnCount + 1; i <= _value; i++) { + _json[_key].splice(i, 0, nullJson); + } + } else { + _json[_key].splice(_value, columnCount); + } + that.renderForm(); + } else if (_key === 'dateformat') { + if (_json.tag === 'date') { + var _html = '
'.format('dateDefaultValue' + _json.tag + _json.id); + $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty(); + $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html); + _json.dateformat = data.value; + var dateClass = laydate.render({ + elem: '#dateDefaultValue' + _json.tag + _json.id, + type: _json.datetype, + format: _json.dateformat, + value: new Date(), + done: function (value, date, endDate) { + _json.dateDefaultValue = value; + that.components[_json.tag].update(_json); + } + }); + _json.dateDefaultValue = dateClass.config.elem[0].innerText; + that.components[_json.tag].update(_json); + } + if (_json.tag === 'dateRange') { + var _html = '
'.format('dateDefaultValue' + _json.tag + _json.id); + $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty(); + $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html); + _json.dateformat = data.value; + var _v = layui.util.toDateString(new Date(), _json.dateformat) + " - " + layui.util.toDateString(new Date(), _json.dateformat); + laydate.render({ + elem: '#dateRangeDefaultValue' + _json.tag + _json.id, + type: _json.datetype, + format: _json.dateformat, + value: _v, + range: "-", + done: function (value, date, endDate) { + _json.dateRangeDefaultValue = value; + that.components[_json.tag].update(_json); + } + }); + _json.dateRangeDefaultValue = _v; + that.components[_json.tag].update(_json); + } + } else if (_key === 'datetype') { + if (_json.tag === 'date') { + var _html = '
'.format('dateDefaultValue' + _json.tag + _json.id); + $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty(); + $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html); + _json.datetype = data.value; + var dateClass = laydate.render({ + elem: '#dateDefaultValue' + _json.tag + _json.id, + type: _json.datetype, + format: _json.dateformat, + value: new Date(), + done: function (value, date, endDate) { + _json.dateDefaultValue = value; + that.components[_json.tag].update(_json); + } + }); + _json.dateDefaultValue = dateClass.config.elem[0].innerText; + that.components[_json.tag].update(_json); + } + if (_json.tag === 'dateRange') { + var _html = '
'.format('dateDefaultValue' + _json.tag + _json.id); + $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty(); + $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html); + _json.datetype = data.value; + laydate.render({ + elem: '#dateRangeDefaultValue' + _json.tag + _json.id, + type: _json.datetype, + format: _json.dateformat, + value: _json.dateRangeDefaultValue, + range: "-", + done: function (value, date, endDate) { + _json.dateRangeDefaultValue = value; + that.components[_json.tag].update(_json); + } + }); + that.components[_json.tag].update(_json); + } + } else if (_key === 'required') { + _json.expression = data.value; + that.components[_json.tag].update(_json); + } else if (_key === 'expression') { + _json.expression = data.value; + that.components[_json.tag].update(_json); + } else if (_key === 'anim' || _key === 'arrow') { + _json[data.elem.name] = data.value; + that.components[_json.tag].update(_json); + } else if (_key === 'buttonType') { + _json.buttonType = data.value; + that.components[_json.tag].update(_json); + } else if (_key === 'buttonSize') { + _json.buttonSize = data.value; + that.components[_json.tag].update(_json); + } + }); + form.on('switch', function (data) { + var _key = data.elem.name; + var _value = data.elem.checked ? true : false; + if (_key === 'readonly' || _key == 'disabled' || _key === 'required' || _key === 'half' || _key === 'text' || _key === 'switchValue' || _key === 'isInput' || _key == 'iconPickerSearch' || _key === 'iconPickerPage' || _key === 'isEnter' || _key === 'isLabel') { + _json[_key] = _value; + that.components[_json.tag].update(_json); //局部更新 + } + }); + //options 的添加事件 + if (_json.hasOwnProperty('options')) { + $('#select-option-add').on('click', function () { + //添加html + _json.options.splice(_json.options.length + 1, 0, { + text: 'option', + value: 'value', + checked: false + }); + var _htmloption = ''; + _htmloption += '
'.format(_json.options.length - 1); + _htmloption += '
'; + if (_json.tag === 'checkbox') { + _htmloption += ' '.format(_json.tag); + } else { + _htmloption += ' '.format(_json.tag); + } + _htmloption += '
'; + _htmloption += '
'; + _htmloption += ' '.format(_json.tag, 'option'); + _htmloption += '
'; + _htmloption += '
'; + _htmloption += ' '.format(_json.tag, 'value'); + _htmloption += '
'; + _htmloption += '
'; + _htmloption += ' '; + _htmloption += ' '; + _htmloption += '
'; + _htmloption += '
'; + $('#columnProperty .select-options').last().after(_htmloption); + _html = ''; + if (_json.tag === 'checkbox') { + //同步到设计视图checkbox + _html += ''.format(_json.tag, 'option'); + $('#' + _json.id + ' .layui-input-block').append(_html); + } else if (_json.tag === 'radio') { + //同步到设计视图radio + _html += ''.format(_json.tag, 'option'); + $('#' + _json.id + ' .layui-input-block').append(_html); + } else if (_json.tag === 'carousel') { + } + if (_json.tag === 'checkbox') { + form.render('checkbox'); + } else if (_json.tag === 'radio') { + form.render('radio'); + } else if (_json.tag == 'carousel') { + that.components[_json.tag].update(_json); + form.render('radio'); + carousel.render({ + elem: '#' + item.tag + item.id, + width: item.width, //设置容器宽度 + arrow: item.arrow, //始终显示箭头 + //anim: 'updown' //切换动画方式 + }); + } else if (_json.tag == 'select') { + form.render('select'); + form.render('radio'); + } + }); + //委托监听先关闭在增加 click + $(document).off('click', '#columnProperty .select-option-delete').on('click', '#columnProperty .select-option-delete', function (e) { + e.preventDefault(); + e.stopPropagation(); + //从数据源 options.data 中删除节点 + if (_json.options.length <= 1) { + layer.msg('已达到最低选项，不能继续删除'); + return; + } + var _index = $(this).closest('.layui-form-item')[0].dataset.index; + if (_index !== undefined) { + _json.options.splice(_index, 1); //删除此节点 + } + var checkedDefual = true; + for (var i = 0; i < _json.options.length; i++) { + if (_json.options[i].checked) { + vv = false + } + } + if (checkedDefual) { + _json.options[0].checked = true; + } + //从html中删除节点 改成全部重绘 + // $(this).closest('.layui-form-item').remove() + $('#' + _json.tag).empty(); + //删除所有的选项 + //选项 + var _html = ''; + for (var i = 0; i < _json.options.length; i++) { + _html += '
'.format(i); + _html += '
'; + if (_json.tag === 'checkbox') { + if (_json.options[i].checked) { + _html += ' '.format(_json.tag); + } else { + _html += ' '.format(_json.tag); + } + } else { + if (_json.options[i].checked) { + _html += ' '.format(_json.tag); + } else { + _html += ' '.format(_json.tag); + } + } + _html += '
'; + _html += '
'; + _html += ' '.format(_json.tag, _json.options[i].text); + _html += '
'; + _html += '
'; + _html += ' '.format(_json.tag, _json.options[i].value); + _html += '
'; + _html += '
'; + _html += ' '; + _html += ' '; + _html += '
'; + _html += '
'; + } + $('#' + _json.tag).append(_html); + //更新设计区节点 + that.components[_json.tag].update(_json); + if (_json.tag === 'checkbox') { + form.render('checkbox'); + } else if (_json.tag === 'radio') { + form.render('radio'); + } else if (_json.tag == 'select') { + form.render('select'); + form.render('radio'); + } + //向 .option .layui-inline 添加drag事件并且必须设在 select-option-drag 中才能拖动 + }); + } + $(document).off('click', '.select-options input[type=checkbox]').on('click', '.select-options input[type=checkbox]', function (e) { + // console.log(e); + //判断是否选中 + //找到 id=key 下的 option值 + var _options = []; + //遍历options 的值 + $('#columnProperty .select-options').each(function () { + _options.push({ + text: $(this).find('input[name=select-text]').val(), + value: $(this).find('input[name=select-value]').val() + }); + // console.log($(this)); + }); + //_json.options 节点值替换为 _options 值 + _json.options = JSON.parse(JSON.stringify(_options)); + }); + //属性模块的 input keyup + $(document).off('keyup', '#columnProperty .layui-input').on('keyup', '#columnProperty .layui-input', function () { + if ($(this).attr("name") !== undefined) { + //去改变值 + //改变json的值 + var _key = $(this).attr("name"); + var _value = $(this).val(); + var _json = options.selectItem; + if (_key === 'id') { + return; + } + if (_key === 'label' || _key === 'width' || _key === 'interval' || _key === 'iconPickerLimit' || _key === 'iconPickerCellWidth' || _key === 'buttonVlaue') { + _json[_key] = _value; + that.components[_json.tag].update(_json); //局部更新 + } + if (_key === 'uploadUrl' || _key === 'cronUrl') { + _json[_key] = _value; + } + if (_key === 'placeholder') { + _json[_key] = _value; + $('#' + _json.id).find('.layui-input').attr('placeholder', _value); + } + if (_key === 'height') { + _json[_key] = _value; + if (_json.tag === 'editor') { + that.components[_json.tag].update(_json); //局部更新 + } + if (_json.tag === 'carousel') { + _json[_key] = _value; + that.components[_json.tag].update(_json); //局部更新 + } + } + if (_key == 'uploadImage') { + _json[_key] = _value; + layedit.build(_json.tag + _json.id, { + height: _json['height'], + uploadImage: _value + }); //建立编辑器 + } + if (_key === 'defaultValue') { + _json[_key] = _value; + if (_json.tag === 'slider') { + var resultNumber = that.replaceNumber(_value); + _json[_key] = resultNumber; + $(this).val(resultNumber); + slider.render({ + elem: '#' + _json.tag + _json.id, + value: _json.defaultValue, //初始值 + min: _json.minValue, + max: _json.maxValue, + step: _json.stepValue, + disabled: _json.disabled + }); + } else if (_json.tag === 'rate') { + rate.render({ + elem: '#' + _json.tag + _json.id, + value: _json.defaultValue, + text: _json.text, + length: _json.rateLength, + half: _json.half, + readonly: _json.readonly + }); + } else if (_json.tag == 'textarea') { + $('#' + _json.id).find('.layui-textarea').text(_value); + } else if (_json.tag == 'colorpicker') { + that.components[_json.tag].update(_json); //局部更新 + } else if (_json.tag == 'iconPicker') { + that.components[_json.tag].update(_json); //局部更新 + } else if (_json.tag == 'numberInput') { + var resultNumber = that.replaceNumber(_value); + _json[_key] = resultNumber; + $(this).val(resultNumber); + that.components[_json.tag].update(_json); //局部更新 + } else { + $('#' + _json.id).find('.layui-input').val(_value); + } + } + if (_key === "minValue" || _key === "maxValue") { + var resultNumber = that.replaceNumber(_value); + _json[_key] = resultNumber; + $(this).val(resultNumber); + if (_json.tag === 'slider') { + slider.render({ + elem: '#' + _json.tag + _json.id, + value: _json.defaultValue, //初始值 + min: _json.minValue, + max: _json.maxValue, + step: _json.stepValue, + disabled: _json.disabled + }); + } else if (_json.tag == 'numberInput') { + that.components[_json.tag].update(_json); //局部更新 + } + } + if(_key === 'stepValue') { + _json[_key] = _value; + if (_json.tag == 'numberInput') { + that.components[_json.tag].update(_json); //局部更新 + } + } + if (_key === 'rateLength') { + _json[_key] = _value; + if (_json.tag === 'rate') { + rate.render({ + elem: '#' + _json.tag + _json.id, + value: _json.defaultValue, + text: _json.text, + length: _json.rateLength, + half: _json.half, + readonly: _json.readonly + }); + } + } + if (_key === 'document') { + _json[_key] = _value; + } + if (_key === 'readonly') { + _json[_key] = _value; + $('#' + _json.id).find('.layui-input').attr('readonly', _value); + } + if (_key === 'select-text' || _key === 'select-value' || _key === 'radio-text' || _key === 'radio-value' || _key === 'checkbox-text' || _key === 'checkbox-value') { + //找到 id=key 下的 option值 + var _index = parseInt($(this).parent().parent().attr("data-index")); + if (_key === 'select-text' || _key === 'radio-text' || _key === 'checkbox-text') { + _json.options[_index].text = $(this).val(); + } else { + _json.options[_index].value = $(this).val(); + } + that.components[_json.tag].update(_json); //局部更新 + } + if (_key === 'carousel-text' || _key === 'carousel-value') { + //找到 id=key 下的 option值 + var _options = []; + //遍历options 的值 + $('#columnProperty .select-options').each(function () { + _options.push({ + text: $(this).find('input[name=carousel-text]').val(), + value: $(this).find('input[name=carousel-value]').val() + }); + // console.log($(this)); + }); + //_json.options 节点值替换为 _options 值 + _json.options = JSON.parse(JSON.stringify(_options)); + that.components[_json.tag].update(_json); //局部更新 + } + } + }); + $(document).off('blur', '#columnProperty .layui-input').on('blur', '#columnProperty .layui-input', function () { + if ($(this).attr("name") !== undefined) { + //改变json的值 + var _key = $(this).attr("name"); + var _value = $(this).val(); + var _json = options.selectItem; + var _oldid = _json.id; + if (_key === 'id' && _value !== _oldid) { //标识的更改 + //检测id是否存在重复 + var _checkid = that.findJsonItem(options.data, _value); + if (_checkid === undefined) { + _json[_key] = _value; + that.renderForm(); + } else { + //提示层 + layer.msg('ID已经存在'); + } + } + } + }); + //预览 + } + //递归赋值 + Class.prototype.replaceNumber = function (value) { + value = value.replace(/[^\d]/g, ''); + if ('' != value) { + value = parseInt(value); + } + return value; + } + /* 加入copy选项删除 */ + Class.prototype.addCopyDeleteClick = function () { + var that = this, + options = that.config; + if (options.data === undefined) { + return; + } + if (typeof (options.data) === 'string') { + options.data = JSON.parse(options.data); + } + //复制当前节点 + $('#formDesignerForm .layui-form-item .widget-view-action .layui-icon-file').on('click', function (e) { + e.stopPropagation(); + //在json中插入 + if (options.data === undefined) { + return; + } + if (typeof (options.data) === 'string') { + options.data = JSON.parse(options.data); + } + var _id = document.elementFromPoint(e.pageX, e.pageY).parentElement.parentElement.dataset.id; + if (_id !== undefined) { + options.selectItem = that.copyJsonAfterItem(options.data, _id); + } + that.renderForm(); + }); + $('#formDesignerForm .layui-form-item .layui-icon-delete').on('click', function (e) { + e.stopPropagation(); + //获取当前组件的组件id + var _id = document.elementFromPoint(e.pageX, e.pageY).parentElement.parentElement.dataset.id; + if (_id !== undefined) { + options.selectItem = that.deleteJsonItem(options.data, _id); + delete iceEditorObjects["editor" + _id] + } + //document.elementFromPoint(e.pageX,e.pageY).parentElement.parentElement.parentElement.dataset 获取父grid的信息 + // 删除刷新表单与属性 + that.renderForm(); + // console.log('click layui-icon layui-icon-delete'); + }); + }; + /* 触发 grid 的 sortablejs 事件*/ + Class.prototype.bindGridSortEvent = function (json) { + var that = this; + var options = that.config; + var objs = $('#' + json.id + ' .widget-col-list'); + //遍历他下面的节点 + for (var i = 0; i < objs.length; i++) { + var el = objs[i]; + var ops = { + group: { + name: 'formgroup' + }, + handle: '.widget-view-drag', + ghostClass: "ghost", + animation: 150, + onAdd: function (evt) { + var parentItem = JSON.parse(JSON.stringify(that.findJsonItem(options.data, evt.item.parentElement.parentElement.dataset.id))); + var index = evt.newIndex; + var colIndex = evt.item.parentElement.dataset.index; + if (evt.item.dataset.id != undefined) { + //表示从其他地方移动过来 + var _fromItem = JSON.parse(JSON.stringify(that.findJsonItem(options.data, evt.item.dataset.id))); + var _oldid = _fromItem.id; + _fromItem.id = that.autoId(_fromItem.tag); + _fromItem.index = index; + parentItem.columns[colIndex].list.splice(index + 1, 0, _fromItem); + that.findAndCopyJson(options.data, parentItem, evt.item.parentElement.parentElement.dataset.id); + that.deleteJsonItem(options.data, _oldid); + } else { + /* 向指定目标放入数据 splice */ + var tag = evt.item.dataset.tag; + _id = that.autoId(tag); + var _newitem = that.components[tag].jsonData(_id, evt.newIndex); + _newitem.index = index; + parentItem.columns[colIndex].list.splice(index + 1, 0, _newitem); + that.findAndCopyJson(options.data, parentItem, evt.item.parentElement.parentElement.dataset.id); + options.selectItem = _newitem; + } + that.renderForm(); + }, + //拖动结束 + onEnd: function (evt) { + //console.log(evt); + } + }; + var gridSortable = Sortable.create(el, ops); + } + }; + //递归赋值 + Class.prototype.findAndCopyJson = function (json, parentItem, id) { + var that = this; + for (var i = 0; i < json.length; i++) { + if (json[i].id === id) { + json[i] = parentItem; + } else { + if (json[i].tag === 'grid') { + for (var j = 0; j < json[i].columns.length; j++) { + if (json[i].columns[j].list.length > 0) { + that.findAndCopyJson(json[i].columns[j].list, parentItem, id); + } + } + } + } + } + } + //渲染视图 + Class.prototype.render = function () { + var that = this; + var options = that.config; + options.elem = $(options.elem); + options.id = options.id || options.elem.attr('id') || that.index; + //cache 模式 + /* 输入型组件 开始*/ + var _listhtml = "" + _listhtml += '
{0}
'.format(formField.c1.name); + _listhtml += '
'; + $.each(formField.c1.list, function (index, item) { + _listhtml += '
{1}
'.format(item, lang[item]); + }); + _listhtml += '
'; + _listhtml += '
{0}
'.format(formField.c2.name); + _listhtml += '
'; + /* 选择型组件 开始*/ + $.each(formField.c2.list, function (index, item) { + _listhtml += '
{1}
'.format(item, lang[item]); + }); + _listhtml += '
'; + _listhtml += '
{0}
'.format(formField.c3.name); + _listhtml += '
'; + /* 布局型组件 开始*/ + $.each(formField.c3.list, function (index, item) { + _listhtml += '
{1}
'.format(item, lang[item]); + }); + _listhtml += '
'; + _listhtml += '
{0}
'.format(formField.c4.name); + _listhtml += '
'; + /* 选择型组件 开始*/ + $.each(formField.c4.list, function (index, item) { + _listhtml += '
{1}
'.format(item, lang[item]); + }); + _listhtml += '
'; + _listhtml += '
{0}
'.format(formField.c5.name); + _listhtml += '
'; + /* 选择型组件 开始*/ + $.each(formField.c5.list, function (index, item) { + _listhtml += '
{1}
'.format(item, lang[item]); + }); + _listhtml += '
'; + options.elem.html(TP_MAIN); + $('#components-form-list').append(_listhtml); + $('body').append(TP_HTML_VIEW); + $('body').append(TP_IMPORT_VIEW); //TP_IMPORT_VIEW + $('body').append(TP_ABOUT_VIEW); + //排序事件注册 + var sortable1 = Sortable.create(document.getElementById("c1"), { + group: { + name: 'formgroup', + pull: 'clone', //克隆本区域元素到其他区域 + put: false, //禁止本区域实现拖动或拖入 + }, + // ghostClass: "ghost", + sort: false, + animation: 150, + onEnd: function (evt) { + // console.log('onEnd.foo:', [evt.item, evt.from]); + // console.log(evt.oldIndex); + // console.log(evt.newIndex); + var itemEl = evt.item; + // console.log(itemEl); + } + }); + var sortable2 = Sortable.create(document.getElementById("c2"), { + group: { + name: 'formgroup', + pull: 'clone', + put: false, //禁止本区域实现拖动或拖入 + }, + sort: false, + animation: 150 + }); + var sortable3 = Sortable.create(document.getElementById("c3"), { + group: { + name: 'formgroup', + pull: 'clone', + put: false, //禁止本区域实现拖动或拖入 + }, + sort: false, + animation: 150 + }); + var sortable4 = Sortable.create(document.getElementById("c4"), { + group: { + name: 'formgroup', + pull: 'clone', + put: false, //禁止本区域实现拖动或拖入 + }, + sort: false, + animation: 150 + }); + var sortable5 = Sortable.create(document.getElementById("c5"), { + group: { + name: 'formgroup', + pull: 'clone', + put: false, //禁止本区域实现拖动或拖入 + }, + sort: false, + animation: 150 + }); + // 表单设计 + var formItemSort = Sortable.create(document.getElementById("formDesignerForm"), { + group: { + name: 'formgroup' + }, + handle: '.widget-view-drag', + ghostClass: "ghost", + animation: 200, + /** + * 不同元素之间的拷贝 + * 如果是从组件区域则是创建一个新的节点 + * 如果是从设计区则是移动一个节点 + * */ + onAdd: function (evt) { + var columncount = evt.item.dataset.columncount; + if (columncount === undefined) { + columncount = 2; + } + // 没有表单JSON数据 + console.log(options.data) + if (options.data === undefined) { + return; + } + if (typeof (options.data) === 'string') { + options.data = JSON.parse(options.data); + } + //注意这里的一个bug，newIndex 第一次拖动也是1 第二次拖动也是1 + if (options.data.length === 0) { + evt.newIndex = 0; + } + if (evt.item.dataset.id !== undefined) { + /*根据id的新算法 复制一份副本 删除json中的节点 再插入节点*/ + var _item = that.findJsonItem(options.data, evt.item.dataset.id); + options.selectItem = _item; + that.deleteJsonItem(options.data, evt.item.dataset.id); + options.data.splice(evt.newIndex + 1, 0, _item); + } else { + var _id = that.autoId(evt.item.dataset.tag); + /* 向现有的表单数据中增加新的数组元素 splice */ + var _newitem = that.components[evt.item.dataset.tag].jsonData(_id, evt.newIndex, columncount); + //如果是 grid 呢，需要知道几列 + options.selectItem = _newitem; + options.data.splice(evt.newIndex, 0, _newitem); //options.data.splice(evt.newIndex + 1, 0, _newitem); + /* 如果evt.item.dataset.id 有值表示从已经存在的布局中获取了元素，这个时候要在数据源中删除这个元素*/ + } + //局部更新 只要更新 designer 设计区部分 + that.renderForm(); + }, + onEnd: function (evt) { + var newIndex = evt.newIndex; + var oldIndex = evt.oldIndex; + //只有当to的目标容器是 formDesignerForm 才出发次逻辑 + if (evt.to.id === 'formDesignerForm') { + that.moveItem(evt.oldIndex, evt.newIndex); + } + } + }); + //移动视图 + Class.prototype.moveItem = function (oldIndex, newIndex) { + var that = this, + options = that.config; + var newData = options.data[newIndex]; + var oldData = options.data[oldIndex]; + options.data[newIndex] = oldData; + options.data[oldIndex] = newData; + } + //导出数据 + $('.exportJson').on('click', function () { + document.getElementById('generate-code-view').value = JSON.stringify(options.data, null, 4); + layer.open({ + type: 1, + title: 'JSON 数据导出', + id: 'Lay_layer_htmlcodeview', + content: $('.htmlcodeview'), + area: ['800px', '640px'], + shade: false, + resize: false, + success: function (layero, index) {}, + end: function () { + $('.htmlcodeview').css("display", "none") + } + }); + }); + //导入数据 + $('.importJson').on('click', function () { + document.getElementById('import-json-code').value = JSON.stringify(options.data, null, 4); + layer.open({ + type: 1, + title: 'JSON模板数据导入', + id: 'Lay_layer_importjsoncodeview', + content: $('.importjsoncodeview'), + area: ['800px', '640px'], + shade: false, + resize: false, + success: function (layero, index) { + }, + end: function () { + $('.importjsoncodeview').css("display", "none") + } + }); + }); + $('.aboutForm').on('click', function () { + layer.open({ + type: 1, + title: '关于 Layui表单设计器', + id: 'Lay_layer_aboutusview', + content: $('.aboutusview'), + area: ['800px', '640px'], + shade: false, + resize: false, + success: function (layero, index) { + }, + end: function () { + } + }); + }); + $('#copy-html-code').on('click', function () { + var Url2 = document.getElementById("generate-code-view"); + Url2.select(); // 选择对象 + document.execCommand("Copy"); // 执行 + layer.msg('复制成功'); + }); + $('#import-json-code').on('click', function () { + var _value = document.getElementById("import-json-code-view").value; + options.data = JSON.parse(_value); + that.renderForm(); + layer.closeAll(); + layer.msg('导入成功'); + }); + $('.generateCode').on('click', function () { + options.htmlCode.script = ''; + var _htmlelem = $('
'); + that.generateHtml(options.data, _htmlelem); + //构件 html + var TP_HTML_CODE = [ + '', + '', + ' ', + ' ', + ' ', + ' 表单设计器代码', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + '
', + '
', + '' + _htmlelem.html() + '', + '
', + '
', + ' ', + ' ', + '
', + '
', + '
' + + '
', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + ' ', + '' + ].join(''); + var tabsize = 4; + var tabchar = ' '; + if (tabsize == 1) { + tabchar = '\t'; + } + document.getElementById('generate-code-view').value = style_html(TP_HTML_CODE, tabsize, tabchar, 400); + console.log($('#generate-code-view').val()); + // layer.open({ + // type: 1, + // title: 'HTML代码', + // id: 'Lay_layer_htmlcodeview', + // content: $('.htmlcodeview'), + // area: ['800px', '640px'], + // shade: false, + // resize: false, + // success: function (layero, index) { + // layer.style(index, { + // marginLeft: -220 + // }); + // }, + // end: function () { + // $('.htmlcodeview').css("display", "none") + // } + // }); + }); + $('.previewForm').on('click', function () { + window.localStorage.setItem('layui_form_json', JSON.stringify(options.data)); + layer.confirm('请选择你要预览页面的方式？', { + btn: ['弹窗', '新页面'] //按钮 + }, function () { + //iframe窗 + layer.open({ + type: 2, + title: '表单预览', + btn: ['关闭'], //可以无限个按钮 + btn1: function (index, layero) { + layer.close(index); + }, + closeBtn: 1, //不显示关闭按钮 + shade: [0], + area: ['100%', '100%'], + offset: 'auto', //右下角弹出 + anim: 2, + content: ['./preview.html', 'yes'], //iframe的url，no代表不显示滚动条 + end: function () { //此处用于演示 + //加载结束 + } + }); + }, function () { + window.open("./preview.html"); + }); + }); + $('.saveJson').on('click', function () { + //window.localStorage.setItem('layui_form_json', JSON.stringify(options.data)); + CoreUtil.sendPut("/activiti-form/setActivitiForm", { + "id": $("#fromId").val(), + "formData": JSON.stringify(options.data) + }, function (res) { + if (res.code === 0) { + layer.msg(res.msg, { + icon: 1 + }); + } else { + layer.msg(res.msg, { + icon: 2 + }); + } + setTimeout(function () { + var index = parent.layer.getFrameIndex(window.name); + parent.layer.close(index); //关闭弹出层 + parent.location.reload(); + }, 1000); + }) + //var index = parent.layer.getFrameIndex(window.name); + //parent.layer.close(index); + }); + that.renderForm(); + }; + /* 递归渲染组件 */ + Class.prototype.renderComponents = function (jsondata, elem) { + var that = this, + options = that.config; + $.each(jsondata, function (index, item) { + item.index = index; //设置index 仅仅为了传递给render对象，如果存在下级子节点那么 子节点的也要变动 + if (options.selectItem === undefined) { + elem.append(that.components[item.tag].render(item, false)); + } else { + if (options.selectItem.id === item.id) { + elem.append(that.components[item.tag].render(item, true)); + //显示当前的属性 + that.components[item.tag].property(item); + that.bindPropertyEvent(item); + } else { + elem.append(that.components[item.tag].render(item, false)); + } + } + if (item.tag === 'grid') { + that.bindGridSortEvent(item); + $.each(item.columns, function (index2, item2) { + //获取当前的 DOM 对象 + if (item2.list.length > 0) { + var elem2 = $('#' + item.id + '_column_' + index2); + if (item2.list.length > 0) { + that.renderComponents(item2.list, elem2); + } + } + }); + } else if (item.tag === 'slider') { + //定义初始值 + slider.render({ + elem: '#' + item.tag + item.id, + value: item.defaultValue, //初始值 + min: item.minValue, + max: item.maxValue, + step: item.stepValue, + input: item.isInput, + change: function (value) { + $("#" + item.id).find("input[name=" + item.id + "]").val(value); + } + }); + } else if (item.tag === 'numberInput') { + //定义初始值 + var _width = item.width.replace(/[^\d]/g, ''); + if ('' != _width) { + _width = 100 - parseInt(_width); + } + $('#' + item.id + ' .layui-input-block .layui-number-input-btn').css("right", _width + "%"); + if (item.disabled) { + $('#' + item.id + ' .layui-input-block .layui-number-input-btn').css("z-index", "-1"); + } + } else if (item.tag === 'date') { + laydate.render({ + elem: '#' + item.tag + item.id, + type: item.datetype, + format: item.dateformat, + value: item.dateDefaultValue, + min: item.dataMinValue, + max: item.dataMaxValue, + }); + } else if (item.tag === 'labelGeneration') { + labelGeneration.render({ + elem: '#' + item.tag + item.id, + data: item.dateDefaultValue, + isEnter: item.isEnter + }); + } else if (item.tag === 'sign') { + $('#' + item.id + item.tag).click(function () { + layer.open({ + type: 2, + title: '手写签名', + btn: ['保存', '关闭'], //可以无限个按钮 + yes: function (index, layero) { + //do something + var iframe = window['layui-layer-iframe' + index]; + var data = iframe.getCanvasData(); + item.data = data; + that.components[item.tag].update(item); + layer.close(index); //如果设定了yes回调，需进行手工关闭 + }, + btn2: function (index, layero) { + layer.close(index); + }, + closeBtn: 1, //不显示关闭按钮 + shade: [0], + area: ['60%', '60%'], + offset: 'auto', //右下角弹出 + anim: 2, + content: ['./handwrittenSignature.html', 'yes'], //iframe的url，no代表不显示滚动条 + success: function (layero, index) { + } + }); + }); + } else if (item.tag === 'iconPicker') { + iconPicker.render({ + // 选择器，推荐使用input + elem: '#' + item.tag + item.id, + // 数据类型：fontClass/unicode，推荐使用fontClass + type: 'fontClass', + // 是否开启搜索：true/false，默认true + search: item.iconPickerSearch, + // 是否开启分页：true/false，默认true + page: item.iconPickerPage, + // 每页显示数量，默认12 + limit: item.iconPickerLimit, + // 每个图标格子的宽度：'43px'或'20%' + cellWidth: item.iconPickerCellWidth, + // 点击回调 + click: function (data) { + //console.log(data); + }, + // 渲染成功后的回调 + success: function (d) { + //console.log(d); + } + }); + iconPicker.checkIcon(item.tag + item.id, ''); + } else if (item.tag === 'dateRange') { + laydate.render({ + elem: '#' + item.tag + item.id, + type: item.datetype, + format: item.dateformat, + min: item.dataMinValue, + max: item.dataMaxValue, + range: ['#start-' + item.tag + item.id, '#end-' + item.tag + item.id] + }); + if (item.dateRangeDefaultValue !== null && item.dateRangeDefaultValue !== "" && item.dateRangeDefaultValue !== undefined) { + var split = item.dateRangeDefaultValue.split(" - "); + $('#start-' + item.tag + item.id).val(split[0]); + $('#end-' + item.tag + item.id).val(split[1]); + } + } else if (item.tag === 'rate') { + rate.render({ + elem: '#' + item.tag + item.id, + value: item.defaultValue, + text: item.text, + half: item.half, + length: item.rateLength, + readonly: item.readonly, + choose: function (value) { + $("#" + item.id).find("input[name=" + item.id + "]").val(value); + } + }); + } else if (item.tag === 'cron' && !item.disabled) { + cron.render({ + elem: "#" + item.tag + item.id + "-button", // 绑定元素 + url: item.cronUrl, // 获取最近运行时间的接口 + // value: $("#cron").val(), // 默认值 + done: function (cronStr) { + $("#" + item.tag + item.id).val(cronStr); + }, + }); + } else if (item.tag === 'colorpicker') { + colorpicker.render({ + elem: '#' + item.tag + item.id, + color: item.defaultValue, + format: 'rgb', + predefine: true, + alpha: true, + done: function (color) { + $("#" + item.id).find("input[name=" + item.id + "]").val(color); + //譬如你可以在回调中把得到的 color 赋值给表单 + } + }); + } else if (item.tag === 'editor') { + var e = new ice.editor(item.tag + item.id); + e.width = item.width; //宽度 + e.height = item.height; //高度 + e.uploadUrl = item.uploadUrl; //上传文件路径 + e.disabled = item.disabled; + e.menu = item.menu; + e.create(); + iceEditorObjects[item.id] = e; + } else if (item.tag === 'carousel') { + carousel.render({ + elem: '#' + item.tag + item.id, + width: item.width, //设置容器宽度 + height: item.height, //设置容器宽度 + arrow: item.arrow, //始终显示箭头 + interval: item.interval, + anim: item.anim, + autoplay: item.autoplay, + }); + } else if (item.tag === 'image') { + upload.render({ + elem: '#' + item.tag + item.id, + url: 'https://httpbin.org/post', + multiple: true, + before: function (obj) { + layer.msg('图片上传中...', { + icon: 16, + shade: 0.01, + time: 0 + }) + }, + done: function (res) { + layer.close(layer.msg()); //关闭上传提示窗口 + //上传完毕 + $('#uploader-list-' + item.id).append('
' + '
' + '' + '
' + res.data.title + '
' + '
'); + } + }); + } else if (item.tag === 'file') { + upload.render({ + elem: '#' + item.tag + item.id, + elemList: $('#list-' + item.id) //列表元素对象 + , + url: '' + item.uploadUrl + '', + accept: 'file', + multiple: true, + number: 3, + auto: false, + bindAction: '#listAction-' + item.id, + choose: function (obj) { + var that = this; + var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 + //读取本地文件 + obj.preview(function (index, file, result) { + var tr = $(['', '' + file.name + '', '' + (file.size / 1014).toFixed(1) + 'kb', '
', '', '', '', '', ''].join('')); + //单个重传 + tr.find('.demo-reload').on('click', function () { + obj.upload(index, file); + }); + //删除 + tr.find('.demo-delete').on('click', function () { + delete files[index]; //删除对应的文件 + tr.remove(); + uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选 + }); + that.elemList.append(tr); + element.render('progress'); //渲染新加的进度条组件 + }); + }, + done: function (res, index, upload) { //成功的回调 + var that = this; + //if(res.code == 0){ //上传成功 + var tr = that.elemList.find('tr#upload-' + index), + tds = tr.children(); + tds.eq(3).html(''); //清空操作 + delete this.files[index]; //删除文件队列已经上传成功的文件 + return; + //} + this.error(index, upload); + }, + allDone: function (obj) { //多文件上传完毕后的状态回调 + console.log(obj) + }, + error: function (index, upload) { //错误回调 + var that = this; + var tr = that.elemList.find('tr#upload-' + index), + tds = tr.children(); + tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 + }, + progress: function (n, elem, e, index) { + element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比 + } + }); + } + }); + }; + /* 生成 Html 代码 */ + Class.prototype.generateHtml = function (jsondata, elem) { + var that = this, + options = that.config; + $.each(jsondata, function (index, item) { + elem.append(that.components[item.tag].render(item, true)); + if (item.tag === 'grid') { + $.each(item.columns, function (index2, item2) { + //获取当前的 DOM 对象 + var elem2 = $('#' + item.id + '_column_' + index2); + if (item2.list.length > 0) { + that.generateHtml(item2.list, elem2); + } + }); + } else if (item.tag === 'slider') { + //定义初始值 + options.htmlCode.script += ['slider.render({', , 'elem: "#' + item.tag + item.id + '" ,', 'value: ' + item.defaultValue + ',', 'min: ' + item.minValue + ',', 'max: ' + item.maxValue + ',', 'step: ' + item.stepValue + ',', 'input:' + item.isInput + ',', 'change: function(value){', '$("#' + item.id + '").find("input[name="' + item.id + '"]").val(value);', ' }', '});'].join(''); + } else if (item.tag === 'date') { + options.htmlCode.script += ['laydate.render({', 'elem: "#' + item.tag + item.id + '" ,', 'type:"' + item.datetype + '",', 'format:"' + item.dateformat + '",', 'value:"' + item.dateDefaultValue + '",', 'min:"' + item.dataMinValue + '",', 'max:"' + item.dataMaxValue + '"});'].join(''); + } else if (item.tag === 'rate') { + options.htmlCode.script += ['rate.render({', 'elem: "#' + item.tag + item.id + '" ,', 'value: ' + item.defaultValue + ',', 'text: ' + item.text + ',', 'length: ' + item.rateLength + ',', 'half: ' + item.half + ',', 'readonly: ' + item.readonly + ',', 'choose: function(value){', '$("#' + item.id + '").find("input[name="' + item.id + '"]").val(value);', '}', '});'].join(''); + } else if (item.tag === 'colorpicker') { + options.htmlCode.script += ['colorpicker.render({', 'elem: "#' + item.tag + item.id + '"', ',format: \'rgb\'', ',predefine: true', ',alpha: true', ',done: function (color) {', '$("#' + item.id + '").find("input[name="' + item.id + '"]").val(color);', '}', '});'].join(''); + } else if (item.tag === 'editor') { + options.htmlCode.script += ['var e = new ice.editor(' + item.tag + item.id + ');', 'e.width=' + item.width + '; //宽度', 'e.height=' + item.height + '; //高度', 'e.uploadUrl=' + item.uploadUrl + '; //上传文件路径', 'e.disabled=' + item.disabled + ';', 'e.menu = ' + item.menu + ';', 'e.create();'].join(''); + } else if (item.tag === 'carousel') { + options.htmlCode.script += ['carousel.render({', 'elem: "#' + item.tag + item.id + '" ', ',width: "' + item.width + '"', ',height: "' + item.height + '"', ',arrow: "' + item.arrow + '"', ',interval: "' + item.interval + '"', ',anim: "' + item.anim + '"', ',autoplay: "' + item.autoplay + '"', '});'].join(''); + } else if (item.tag === 'labelGeneration') { + options.htmlCode.script += ['labelGeneration.render({', 'elem:"#' + item.tag + item.id + '",', 'data:' + item.dateDefaultValue + ',', 'isEnter:' + item.isEnter + '', '});'].join(''); + } else if (item.tag === 'iconPicker') { + options.htmlCode.script += ['iconPicker.render({', 'elem:"#' + item.tag + item.id + '",', 'type:"fontClass",', 'search:' + item.iconPickerSearch + '', 'page:' + item.iconPickerPage + '', 'limit:' + item.iconPickerLimit + '', 'cellWidth:' + item.iconPickerCellWidth + '', ' click: function (data) {},', 'success: function(d) {}', '});', 'iconPicker.checkIcon(' + item.tag + item.id + ',"");'].join(''); + } else if (item.tag === 'dateRange') { + options.htmlCode.script += ['laydate.render({', 'elem:"#' + item.tag + item.id + '",', 'type:' + item.datetype + ',', 'format:' + item.dateformat + '', 'min:' + item.dataMinValue + '', 'max:' + item.dataMaxValue + '', 'range:["#start-' + item.tag + item.id + '", "#end-' + item.tag + item.id + '"]', '});'].join(''); + } else if (item.tag === 'cron' && !item.disabled) { + options.htmlCode.script += ['cron.render({', 'elem:"#' + item.tag + item.id + '-button",', 'url:' + item.cronUrl + ',', 'done: function (cronStr) {', '$("#' + item.tag + item.id + '").val(cronStr);', '},', '});'].join(''); + } else if (item.tag === 'file') { + options.htmlCode.script += ['upload.render({', 'elem: "#' + item.tag + item.id + '" ', ', url: "' + item.uploadUrl + '"', ' ,elemList: $("#list-' + item.id + '")', ',accept: "file"', ',multiple: true', ',number: 3', ',auto: false', ',bindAction: "#listAction-' + item.id + '"', ',choose: function(obj){', 'var that = this;', 'var files = this.files = obj.pushFile();', 'obj.preview(function(index, file, result){', 'var tr = $([""', ',""+ file.name +""', ',""+ (file.size/1014).toFixed(1) +"kb"', ',"
"', ',"","","",""', ',""].join(""));', 'tr.find(".demo-reload").on("click", function(){obj.upload(index, file);});', 'tr.find(".demo-delete").on("click", function(){delete files[index];tr.remove();uploadListIns.config.elem.next()[0].value = ""; });', 'that.elemList.append(tr);', 'element.render("progress");}', ',done: function(res, index, upload)', '{var that = this;if(res.code == 0){var tr = that.elemList.find("tr#upload-"+ index),tds = tr.children();tds.eq(3).html("");delete this.files[index];return;}this.error(index, upload);}', ',allDone: function(obj){console.log(obj)}', ',error: function(index, upload){var that = this;var tr = that.elemList.find("tr#upload-"+ index),', 'tds = tr.children();tds.eq(3).find(".demo-reload").removeClass("layui-hide");}', ',progress: function(n, elem, e, index){element.progress("progress-demo-"+ index, n + "%");}', '});'].join(''); + } else if (item.tag === 'image') { + options.htmlCode.script += ['upload.render({', 'elem: "#' + item.tag + item.id + '" ', ', url: "' + item.uploadUrl + '"', ', multiple: true', ', before: function (obj) {', 'layer.msg("图片上传中...", {', 'icon: 16,', 'shade: 0.01,', 'time: 0', '})', '}', ', done: function (res) {', 'layer.close(layer.msg());', '$("#uploader-list-' + item.id + '").append(', '\'
', '
\'+ res.data.title+\'
', '
\'', ');', '}', '});'].join(''); + } else if (item.tag === 'checkbox') { + options.htmlCode.script += ['form.verify({otherReq: function(value,item){' + 'var verifyName=$(item).attr("name"), verifyType=$(item).attr("type")' + ',formElem=$(item).parents(".layui-form"),verifyElem=formElem.find("input[name=\'"+verifyName+"\']")' + ',verifyElems = formElem.find("input"),isTrue= verifyElem.is(":checked"),focusElem = verifyElem.next().find("i.layui-icon");' + 'for (let i = 0; i < verifyElems.length; i++) {if (verifyElems[i].checked) {return false;}}' + 'if(!isTrue || !value){' + 'focusElem.css(verifyType=="radio"?{"color":"#FF5722"}:{"border-color":"#FF5722"});' + 'focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {' + 'focusElem.css(verifyType==\'radio\'?{"color":""}:{"border-color":""});' + '}).focus();' + 'return "必填项不能为空";}}});'].join(''); + } + }); + }; + /* 重新渲染设计区*/ + Class.prototype.renderForm = function () { + var that = this, + options = that.config; + var elem = $('#formDesignerForm'); + // 清空表单 + elem.empty(); + // 清空属性配置 + $('#columnProperty').empty(); + that.renderComponents(options.data, elem); + //选中的节点只有一个 + if (options.selectItem !== undefined) { + var _draghtml1 = '
'; + var len = $('#' + options.selectItem.id).children().length; + if ($('#widget-view-action')) { //已存在 + $('#widget-view-action').remove(); + } + $('#' + options.selectItem.id).children(len - 1).after(_draghtml1); + $('#formDesignerForm .layui-form-item').removeClass('active'); + //给当前元素增加class + $('#' + options.selectItem.id).addClass('active'); + //设置当前选择项目的拷贝删除的事件 + //显示当前的属性 + that.components[options.selectItem.tag].property(options.selectItem); + if (options.selectItem.tag === "select" || options.selectItem.tag === "checkbox" || options.selectItem.tag === "radio" || options.selectItem.tag === "carousel") { + var sortable = Sortable.create(document.getElementById(options.selectItem.tag), { + group: { + name: 'propertygroup', + }, + ghostClass: "ghost", + handle: '.select-option-drag', + dataIdAttr: 'data-index', + animation: 150, + onEnd: function (evt) { + if (options.selectItem === undefined) { + return; + } + var indexArray = sortable.toArray(); + var newJson = []; + for (var i = 0; i < indexArray.length; i++) { + newJson.push(options.selectItem.options[indexArray[i]]); + } + options.selectItem.options = newJson; + //that.renderForm(); + that.components[options.selectItem.tag].update(options.selectItem); + } + }); + } + that.bindPropertyEvent(options.selectItem); + } + that.addClick(); + /* 向 拷贝 删除 按钮添加 click 动作 */ + that.addCopyDeleteClick(); + form.render(); + if (options.data.length != 0) { + for (var i = 0; i < options.data.length; i++) { + if (options.data[i].tag === 'grid') { + for (var j = 0; j < options.data[i].columns.length; j++) { + for (var k = 0; k < options.data[i].columns[j].list.length; k++) { + if (options.data[i].columns[j].list[k].tag === 'select') { + $('#' + options.data[i].columns[j].list[k].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({ + width: '{0}'.format(options.data[i].columns[j].list[k].width) + }); + } + } + } + } else { + if (options.data[i].tag === 'select') { + $('#' + options.data[i].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({ + width: '{0}'.format(options.data[i].width) + }); + } + } + } + } + }; + /* 渲染预览框 */ + Class.prototype.renderPreview = function () { + var that = this, + options = that.config; + }; + Class.prototype.reload = function (id, options) { + var that = this; + options = options || {}; //如果是空的话，就赋值 {} + that.render(); + } + //核心入口 初始化一个 regionSelect 类 + formDesigner.render = function (options) { + var ins = new Class(options); + return thisIns.call(ins); + }; + exports('formDesigner', formDesigner); +}); \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/formField.js b/module-form/src/main/resources/static/form-design/modules/formField.js new file mode 100644 index 00000000..2f71d773 --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/formField.js @@ -0,0 +1,454 @@ +layui.define(['layer'], function (exports) { + var field = { + input: { + id: '-1', + index: '-1', + label: "单行文本", + tag: "input", + tagIcon: 'input', + placeholder: "请输入", + defaultValue: null, + labelWidth: 110, + width: "100%", + clearable: true, + maxlength: null, + showWordLimit: false, + readonly: false, + disabled: false, + required: true, + expression: "", + document: '' + }, + password: { + id: '-1', + index: '-1', + label: "密码框", + tag: "password", + tagIcon: 'password', + placeholder: "请输入", + defaultValue: null, + labelWidth: 110, + width: "100%", + clearable: true, + maxlength: null, + showWordLimit: false, + readonly: false, + disabled: false, + required: true, + document: '' + }, + select: { + id: '-1', + index: '-1', + label: "下拉框", + tag: "select", + tagIcon: 'select', + labelWidth: 110, + width: "100%", + disabled: false, + required: true, + document: '', + datasourceType: 'local', + remoteUrl: 'http://', + remoteMethod: 'post', + remoteOptionText: 'options.data.dictName', //映射到text + remoteOptionValue: 'options.data.dictId', //映射到value text和value可以是一样的 + remoteDefaultValue: '12', //表示对应的remoteOptionValue的值 + options: [{ + text: 'option1', + value: 'value1', + checked: true, + }, { + text: 'option2', + value: 'value2', + checked: false, + }, { + text: 'option3', + value: 'value3', + checked: false, + },] + }, + radio: { + id: '-1', + index: '-1', + label: "单选组", + tag: "radio", + tagIcon: 'radio', + labelWidth: 110, + disabled: false, + document: '', + datasourceType: 'local', + remoteUrl: 'http://', + remoteMethod: 'post', + remoteOptionText: 'options.data.dictName', //映射到text + remoteOptionValue: 'options.data.dictId', //映射到value text和value可以是一样的 + options: [{ + text: 'option1', + value: 'value1', + checked: true, + }, { + text: 'option2', + value: 'value2', + checked: false, + }, { + text: 'option3', + value: 'value3', + checked: false, + },] + }, + checkbox: { + id: '-1', + index: '-1', + label: "复选组", + tag: "checkbox", + tagIcon: 'checkbox', + labelWidth: 110, + disabled: false, + required: true, + document: '', + datasourceType: 'local', + remoteUrl: 'http://', + remoteMethod: 'post', + remoteOptionText: 'options.data.dictName', //映射到text + remoteOptionValue: 'options.data.dictId', //映射到value text和value可以是一样的 + options: [{ + text: 'option1', + value: 'value1', + checked: true, + }, { + text: 'option2', + value: 'value2', + checked: true, + }, { + text: 'option3', + value: 'value3', + checked: false, + },] + }, + switch: { + id: '-1', + index: '-1', + label: "开关", + tag: "switch", + tagIcon: 'switch', + labelWidth: 110, + width: "100%", + switchValue: false, + showWordLimit: false, + disabled: false, + document: '', + }, + slider: { + id: '-1', + index: '-1', + label: "滑块", + tag: "slider", + tagIcon: 'slider', + labelWidth: 110, + width: "100%", + defaultValue: 10, + maxValue: 100, + minValue: 1, + stepValue: 2, + isInput: true, + disabled: false, + document: '', + }, + numberInput: { + id: '-1', + index: '-1', + label: "数字输入框", + tag: "numberInput", + tagIcon: 'numberInput', + labelWidth: 110, + width: "100%", + defaultValue: 0, + maxValue: 100, + minValue: 0, + stepValue: 1, + disabled: false, + document: '', + }, + labelGeneration: { + id: '-1', + index: '-1', + label: "标签组件", + tag: "labelGeneration", + tagIcon: 'labelGeneration', + labelWidth: 110, + width: "100%", + isEnter: false, + disabled: false, + document: '', + }, + bottom: { + id: '-1', + index: '-1', + label: "按钮组件", + tag: "bottom", + tagIcon: 'bottom', + labelWidth: 110, + buttonIcon: "", + buttonVlaue: "按钮", + buttonType: "", + buttonSize: "", + isLabel: true, + disabled: false, + document: '', + }, + sign: { + id: '-1', + index: '-1', + label: "签名组件", + tag: "sign", + tagIcon: 'sign', + labelWidth: 110, + buttonVlaue: "手写签名", + buttonIcon: "", + data: "", + disabled: false, + document: '', + }, + iconPicker: { + id: '-1', + index: '-1', + label: "图标选择器", + tag: "iconPicker", + tagIcon: 'iconPicker', + labelWidth: 110, + defaultValue: '', + iconPickerSearch: true, + iconPickerPage: true, + iconPickerLimit: 12, + iconPickerCellWidth: '43px', + disabled: false, + document: '', + }, + cron: { + id: '-1', + index: '-1', + label: "Cron表达式", + tag: "cron", + tagIcon: 'cron', + placeholder: "请输入cron表达式,如:0 0 12 * * ?", + labelWidth: 110, + width: "100%", + defaultValue: '* * * * * ?', + cronUrl: '', + disabled: false, + required: true, + document: '', + }, + date: { + id: '-1', + index: '-1', + label: "日期", + tag: "date", + tagIcon: 'date', + labelWidth: 110, + width: "100%", + clearable: true, + maxlength: null, + dateDefaultValue: '2021-05-25', + datetype: "date", //year month date time datetime + range: false, + dateformat: "yyyy-MM-dd", + isInitValue: false, + dataMaxValue: "2088-12-31", + dataMinValue: "1900-01-01", + trigger: null, //自定义弹出控件的事件 + position: "absolute", //fixed,static,abolute + theme: "default", + mark: null, //每年的日期 {'0-9-18': '国耻'} 0 即代表每一年 + showBottom: true, + zindex: 66666666, + disabled: false, + required: true, + document: '', + }, + dateRange: { + id: '-1', + index: '-1', + label: "日期范围", + tag: "dateRange", + tagIcon: 'dateRange', + labelWidth: 110, + //width:"100%", + dateRangeDefaultValue: "2021-06-19 - 2021-07-17", + clearable: true, + maxlength: null, + datetype: "date", //year month date time datetime + dateformat: "yyyy-MM-dd", + isInitValue: true, + dataMaxValue: "2088-12-31", + dataMinValue: "1900-01-01", + trigger: null, //自定义弹出控件的事件 + position: "absolute", //fixed,static,abolute + theme: "default", + mark: null, //每年的日期 {'0-9-18': '国耻'} 0 即代表每一年 + showBottom: true, + zindex: 66666666, + disabled: false, + required: true, + document: '', + }, + rate: { + id: '-1', + index: '-1', + label: "评分", + tag: "rate", + tagIcon: 'rate', + labelWidth: 110, + defaultValue: 0, + rateLength: 5, //星星长度 + half: false, + text: false, + theme: "default", + showBottom: true, + readonly: false, + document: '', + }, + carousel: { + id: '-1', + index: '-1', + label: "轮播图", + tag: "carousel", + tagIcon: 'carousel', + width: "100%", + height: "500px", + full: false, //是否全屏 + anim: "default", //轮播切换动画方式, + interval: 3000, //切换时间 毫秒 + startIndex: 0, //初始索引 + arrow: "hover", //切换箭头默认显示状态 + autoplay: true, //是否自动切换 + document: '', + datasourceType: 'local', + remoteUrl: 'http://', + remoteMethod: 'post', + remoteOptionText: 'options.data.dictName', //映射到text + remoteOptionValue: 'options.data.dictId', //映射到value text和value可以是一样的 + options: [{ + text: 'banner1', + value: './ayq/images/banner1.PNG', + checked: true, + }, { + text: 'banner2', + value: './ayq/images/banner2.PNG', + checked: false, + }, { + text: 'banner3', + value: './ayq/images/banner3.PNG', + checked: false, + },] + }, + colorpicker: { + id: '-1', + index: '-1', + label: "颜色选择器", + tag: "colorpicker", + tagIcon: 'colorpicker', + labelWidth: 110, + defaultValue: 'rgba(0, 0, 0, 1)', + colorformat: "#fff", + alpha: false, + colors: [], + size: "", + showBottom: true, + disabled: false, + document: '', + }, + image: { + id: '-1', + index: '-1', + label: "上传图片", + tag: "image", + tagIcon: 'image', + placeholder: "请输入", + defaultValue: null, + labelWidth: null, + disabled: false, + required: true, + document: '', + uploadUrl: '', + }, + file: { + id: '-1', + index: '-1', + label: "上传文件", + tag: "file", + tagIcon: 'file', + placeholder: "请输入", + defaultValue: null, + labelWidth: null, + disabled: false, + required: true, + document: '', + uploadUrl: '', + }, + textarea: { + id: '-1', + index: '-1', + label: "多行文本", + tag: "textarea", + tagIcon: 'textarea', + placeholder: "请输入", + defaultValue: null, + width: "100%", + readonly: false, + disabled: false, //这里就是readonly的医生 + required: true, + document: '' + }, + editor: { + id: '-1', + index: '-1', + label: "编辑器", + tag: "editor", + tagIcon: 'editor', + width: "100%", + clearable: true, + maxlength: null, + showWordLimit: false, + menu: ['backColor', 'fontSize', 'foreColor', 'bold', 'italic', 'underline', 'strikeThrough', 'justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'insertOrderedList', 'insertUnorderedList', 'superscript', 'subscript', 'createLink', 'unlink', 'hr', 'face', 'table', 'files', 'music', 'video', 'insertImage', 'removeFormat', 'code', 'line'], + height: "200px", + uploadUrl: '/upload/', + disabled: false, + document: '' + }, + grid: { + id: '-1', + index: '-1', + tag: 'grid', + span: 2, + columns: [{ + span: 12, + list: [], + }, { + span: 12, + list: [], + }] + }, + c1: { + name: "输入型组件(基于layui)", + list: ['input', 'numberInput', 'password', 'textarea'] + }, + c2: { + name: "选择型组件(基于layui)", + list: ['select', 'radio', 'checkbox', 'switch', 'slider', 'date', 'rate', 'carousel', 'colorpicker', 'image', 'file', 'dateRange'] + }, + c3: { + name: "布局型组件(基于layui)", + list: ['grid', 'bottom'] + }, + c4: { + name: "扩展组件(基于layui)", + list: ['iconPicker', 'cron', 'labelGeneration', 'sign'] + }, + c5: { + name: "扩展组件(外部)", + list: ['editor'] + } + }; + exports('formField', field); +}); \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/formPreview.css b/module-form/src/main/resources/static/form-design/modules/formPreview.css new file mode 100644 index 00000000..704d46da --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/formPreview.css @@ -0,0 +1,78 @@ +#formPreviewForm .widget-slider { + margin: 18px 10px; + width : 90%; + position: absolute!important; +} +.custom-lg{ + margin: -3px 0px 0px 10px; +} +.custom-zc{ + margin: 0px 0px 0px 10px; +} +.custom-sm{ + margin: 5px 0px 0px 10px; +} +.custom-xs{ + margin: 10px 0px 0px 10px; +} +.my-disabled{ + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: rgba(191,191,191,.79); +} +.iceEditor-disabled { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: rgba(245,247,250,0.79) !important; + border-color: #dfe4ed !important; + color: #c0c4cc !important; + z-index: 1 !important; + display: block; +} +/* 图片上传 */ +.uploader-list { + margin-left: -15px; +} +.uploader-list .info { + position: relative; + margin-top: -25px; + background-color: black; + color: white; + filter: alpha(Opacity=80); + -moz-opacity: 0.5; + opacity: 0.5; + width: 100px; + height: 25px; + text-align: center; + display: none; +} +.uploader-list .handle { + position: relative; + background-color: black; + color: white; + filter: alpha(Opacity=80); + -moz-opacity: 0.5; + opacity: 0.5; + width: 100px; + text-align: right; + height: 18px; + margin-bottom: -18px; + display: none; +} +.uploader-list .handle i { + margin-right: 5px; +} +.uploader-list .handle i:hover { + cursor: pointer; +} +.uploader-list .file-iteme { + margin: 12px 0 0 15px; + padding: 1px; + float: left; +} \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/formPreview.js b/module-form/src/main/resources/static/form-design/modules/formPreview.js new file mode 100644 index 00000000..9f541a77 --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/formPreview.js @@ -0,0 +1,1645 @@ +/** + +------------------------------------------------------------------------------------+ + + ayq-layui-form-designer(layui表单设计器) + +------------------------------------------------------------------------------------+ + + ayq-layui-form-designer v1.1.6 + * MIT License By http://116.62.237.101:8009/ + + 作者：谁家没一个小强 + + 官方： + + 时间：2021-06-23 + +------------------------------------------------------------------------------------+ + + 版权声明：该版权完全归谁家没一个小强所有，可转载使用和学习，但请务必保留版权信息 + +------------------------------------------------------------------------------------+ + + 本项目是一个基于layui表单组件的表单设计器 + + 1.本项目基于Layui、Jquery、Sortable + + 2.项目已经基本实现了拖动布局，父子布局 + + 3.项目实现了大部分基于Layui的Form表单控件布局，包括输入框、编辑器、下拉、单选、单选组、多选组、日期、滑块、评分、轮播、图片、颜色选择、图片上传、文件上传 + + 4.表单数据的获取与回显,禁用全表单 + +------------------------------------------------------------------------------------+ + */ +layui.config({base: './form-design/modules/'}).define(['layer', 'laytpl', 'element', 'form', 'slider', 'laydate', 'rate', 'colorpicker', 'layedit', 'carousel', 'upload', 'formField', "numberInput", "iconPicker", "cron", "labelGeneration"] + , function (exports) { + var $ = layui.jquery, + layer = layui.layer, + laytpl = layui.laytpl, + setter = layui.cache, + element = layui.element, + slider = layui.slider, + laydate = layui.laydate, + rate = layui.rate, + colorpicker = layui.colorpicker, + carousel = layui.carousel, + form = layui.form, + upload = layui.upload, + layedit = layui.layedit, + formField = layui.formField, + hint = layui.hint, + numberInput = layui.numberInput, + iconPicker = layui.iconPicker, + cron = layui.cron, + labelGeneration = layui.labelGeneration, + iceEditorObjects = {}, + labelGenerationObjects = {}, + signObjects = {}, + files = [], + images = [], + // 主键 + guid = function () { + var d = new Date().getTime(); + if (window.performance && typeof window.performance.now === "function") { + d += performance.now(); //use high-precision timer if available + } + var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { + var r = (d + Math.random() * 16) % 16 | 0; + d = Math.floor(d / 16); + return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); + }); + return uuid; + }, + lang = { + id: "标识", + label: "标题", + index: "序号", + tag: "表单类型", + tagIcon: '图标', + width: '宽度', + height: "高度", + span: '网格宽度', + placeholder: "placeholder", + defaultValue: "默认值", + labelWidth: "文本宽度", + clearable: "是否清楚", + prepend: "前缀", + append: "", + prefixIcon: '前缀图标', + suffixIcon: '后缀图标', + maxlength: "最大长度", + showWordLimit: "是否限制字符", + readonly: "只读", + disabled: "禁用", + required: "必填", + columns: "列数", + options: "选项", + switchValue: "默认值", + maxValue: "最大值", + minValue: "最小值", + stepValue: "步长", + datetype: "日期类型", + dateformat: "日期格式", + half: "显示半星", + theme: "皮肤", + rateLength: "星星个数", + interval: "间隔毫秒", + autoplay: "自动播放", + startIndex: "开始位置", + full: "是否全屏", + arrow: "鼠标样式", + contents: "内容", + document: '帮助文档', + input: "输入框", + select: "下拉", + checkbox: "多选组", + radio: "单选组", + date: "日期", + editor: "编辑器", + slider: "滑块", + image: "图片", + grid: "一行多列", + colorpicker: "颜色选择器", + textarea: "多行文本", + rate: "评分控件", + switch: "开关", + password: "密码框", + carousel: "轮播", + uploadUrl: "上传路径", + expression: "验证", + file: "文件", + numberInput: "排序文本框", + iconPicker: "图标选择器", + cron: "Cron表达式", + cronUrl: "运行路径", + bottom: "按钮组件", + }, + MOD_NAME = 'formPreview', + ELEM = '.layui-form-designer', + TPL_SUBMIT = ['
', + '
', + '', + '', + '
', + '
'].join(''), + //外部接口 + formPreview = { + index: layui.formPreview ? (layui.formPreview.index + 10000) : 0, + //设置全局项 + set: function (options) { + var that = this; + that.config = $.extend({} + , that.config + , options); + return that; + }, + //事件监听 + on: function (events, callback) { + return layui.onevent.call(this + , MOD_NAME + , events + , callback); + } + }, + /** + * 操作当前实例 + * id 表示当前实例的索引 默认就是内部的 index，如果id存在值 那么就从已经存在的获取 + */ + thisIns = function () { + var that = this, options = that.config; + return { + reload: function (options) { + that.reload.call(that + , options); + }, + getOptions: function () { + return options || null; + }, + getData: function () { + return options.data || null; + }, + geticeEditorObjects: function () { + return iceEditorObjects || null; + }, + getImages: function () { + return images || null; + }, + getFiles: function () { + return files || null; + }, + getFormData: function () { + return that.getFormData() || null; + }, + setFormData: function (json) { + return that.setFormData(json) || null; + }, + globalDisable: function () { + return that.globalDisable() || null; + }, + globalNoDisable: function () { + return that.globalNoDisable() || null; + }, + + } + }, + getThisInsConfig = function (id) { + var config = thisIns.config[id]; + if (!config) { + hint.error('The ID option was not found in the table instance'); + } + return config || null; + }, + Class = function (options) { + var that = this; + that.index = ++formPreview.index; //增加实例，index 也是要增加 + that.config = $.extend({}, that.config, formPreview.config, options); + that.render(); + }; + + + /* 此方法最后一道 commom.js 中 */ + String.prototype.format = function (args) { + var result = this; + if (arguments.length > 0) { + if (arguments.length == 1 && typeof (args) == "object") { + for (var key in args) { + if (args[key] != undefined) { + var reg = new RegExp("({" + key + "})" + , "g"); + result = result.replace(reg + , args[key]); + } + } + } else { + for (var i = 0; i < arguments.length; i++) { + if (arguments[i] != undefined) { + var reg = new RegExp("({[" + i + "]})" + , "g"); + result = result.replace(reg + , arguments[i]); + } + } + } + } + return result; + } + + Class.prototype.config = { + version: "1.0.0" + , formName: "表单示例" + , Author: "谁家没一个小强" + , formId: "id" + , generateId: 0 + , data: [] + , formData: {} + , selectItem: undefined + }; + + /* 自动生成ID 当前页面自动排序*/ + Class.prototype.autoId = function (tag) { + var that = this, + options = that.config; + options.generateId = options.generateId + 1; + return tag + '_' + options.generateId; + }; + + /* 组件定义 */ + Class.prototype.components = { + input: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var _required = json.required ? 'required' : ''; + if (json.expression !== null && json.expression !== undefined) { + if (json.expression !== '') { + _required = _required + '|' + json.expression; + } + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.labelWidth); + _html += '' + .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass); + _html += '
'; + // if(selected){ + // _html +='
'; + // } + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.input)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + } + }, + numberInput: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += '' + .format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id); + _html += '
'; + // if(selected){ + // _html +='
'; + // } + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.numberInput)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + } + }, + labelGeneration: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + if (json.disabled) { + _html += '
'; + } + _html += '
'.format(json.tag + json.id, json.width); + _html += '
'; + // if(selected){ + // _html +='
'; + // } + _html += '
'; + return _html; + }, + update: function (json, value) { + $('#' + json.id + ' .layui-input-block').empty(); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += '
'.format(json.tag + json.id); + $('#' + json.id + ' .layui-input-block').append(_html); + var labelGenerationObject = labelGeneration.render({ + elem: '#' + json.tag + json.id, + data: value, + isEnter: json.isEnter + }); + labelGenerationObjects[json.id] = labelGenerationObject; + if (json.disabled) { + $("#" + json.id).find(".layui-input-block").append('
'); + } else { + $("#" + json.id).find(".iceEditor-disabled").remove(); + } + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.labelGeneration)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + }, + iconPicker: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += '' + .format(json.id, json.defaultValue ? json.defaultValue : '', json.placeholder, _disabled, _disabledClass, json.tag + json.id, _required); + _html += '
'; + _html += '
'; + return _html; + }, update: function (json, value) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + $('#' + json.id + ' .layui-input-block').empty(); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += '' + .format(json.id, value ? value : '', json.width, json.placeholder, _disabled, _disabledClass, json.tag + json.id); + $('#' + json.id + ' .layui-input-block').append(_html); + iconPicker.render({ + // 选择器，推荐使用input + elem: '#' + json.tag + json.id, + // 数据类型：fontClass/unicode，推荐使用fontClass + type: 'fontClass', + // 是否开启搜索：true/false，默认true + search: json.iconPickerSearch, + // 是否开启分页：true/false，默认true + page: json.iconPickerPage, + // 每页显示数量，默认12 + limit: json.iconPickerLimit, + // 每个图标格子的宽度：'43px'或'20%' + cellWidth: json.iconPickerCellWidth, + // 点击回调 + click: function (data) { + //console.log(data); + }, + // 渲染成功后的回调 + success: function (d) { + //console.log(d); + } + }); + iconPicker.checkIcon(json.tag + json.id, value); + if (json.disabled) { + $("#" + json.id).find(".layui-input-block").append('
'); + } else { + $("#" + json.id).find(".iceEditor-disabled").remove(); + } + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.iconPicker)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + }, + cron: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _required = json.required ? 'required' : ''; + var _width = json.width.replace(/[^\d]/g, ''); + if ('' != _width) { + _width = 100 - parseInt(_width); + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += '' + .format(json.id, json.defaultValue ? json.defaultValue : '', json.placeholder, _disabled, _disabledClass, json.tag + json.id, _required); + if (!json.disabled) { + _html += ''.format(json.tag + json.id); + } + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json, value) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + $('#' + json.id + ' .layui-input-block').empty(); + var _html = ''; + //重绘设计区改id下的所有元素 + _html += '' + .format(json.id, value ? value : '', json.width, json.placeholder, _disabled, _disabledClass, json.tag + json.id); + if (!json.disabled) { + var _width = json.width.replace(/[^\d]/g, ''); + if ('' != _width) { + _width = 100 - parseInt(_width); + } + _html += ''.format(json.tag + json.id, _width); + $('#' + json.id + ' .layui-input-block').append(_html); + cron.render({ + elem: "#" + json.tag + json.id + "-button", // 绑定元素 + url: json.cronUrl, // 获取最近运行时间的接口 + value: value, // 默认值 + done: function (cronStr) { + $("#" + json.tag + json.id).val(cronStr); + }, + }); + } else { + $('#' + json.id + ' .layui-input-block').append(_html); + } + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.cron)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + }, + password: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var _required = json.required ? 'lay-verify="required"' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.labelWidth); + _html += '' + .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass); + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.password)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + select: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += '' + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.select)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + } + }, + radio: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.labelWidth); + for (var i = 0; i < json.options.length; i++) { + if (json.options[i].checked) { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled); + } else { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled); + } + } + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.radio)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + checkbox: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'lay-verify="otherReq"' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + for (var i = 0; i < json.options.length; i++) { + if (json.options[i].checked) { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required); + } else { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required); + } + } + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json) { + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'lay-verify="otherReq"' : ''; + $('#' + json.id + ' .layui-input-block').empty(); + var _html = ''; + //重绘设计区改id下的所有元素 + for (var i = 0; i < json.options.length; i++) { + _html += ''.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required); + } + $('#' + json.id + ' .layui-input-block').append(_html); + form.render('checkbox'); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.checkbox)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + switch: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += ''.format(json.id, _disabled, _disabledClass, json.switchValue ? 'checked' : ''); + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.switch)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + slider: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += '
'.format(json.tag + json.id); + _html += ''.format(json.id, json.defaultValue); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json, value) { + slider.render({ + elem: '#' + json.tag + json.id, + value: value, //初始值 + min: json.minValue, + max: json.maxValue, + step: json.stepValue, + disabled: json.disabled, + input: json.isInput, + change: function (_value) { + $("#" + json.id).find("input[name=" + json.id + "]").val(_value); + } + }); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.slider)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + date: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _disabledStyle = json.disabled ? ' pointer-events: none;' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.width, json.labelWidth); + _html += ''.format(json.tag + json.id, _disabledClass, _disabledStyle, _required); + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.date)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, bottom: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _coustomCss = ""; + if (json.buttonSize === "layui-btn-lg") { + _coustomCss = "custom-lg"; + } + if (json.buttonSize === "") { + _coustomCss = "custom-zc"; + } + if (json.buttonSize === "layui-btn-sm") { + _coustomCss = "custom-sm"; + } + if (json.buttonSize === "layui-btn-xs") { + _coustomCss = "custom-xs"; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + if (json.isLabel) { + _html += ''.format(json.label, json.labelWidth); + } + _html += '
'; + if (json.disabled) { + _html += ''.format(json.id + json.tag, json.buttonSize, _coustomCss, json.buttonIcon, json.buttonVlaue); + } else { + _html += ''.format(json.id + json.tag, json.buttonSize, json.buttonType, _coustomCss, json.buttonIcon, json.buttonVlaue); + } + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.bottom)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + } + }, sign: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.label, json.labelWidth); + _html += '
'.format(json.labelWidth); + if (json.disabled) { + _html += ''.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue); + } else { + _html += ''.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue); + } + if (json.data !== "") { + _html += '
'.format(json.data); + } + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json, value) { + $('#' + json.id + ' .layui-input-block').empty(); + var _html = ''; + //重绘设计区改id下的所有元素 + if (json.disabled) { + _html += ''.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue); + } else { + _html += ''.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue); + } + if (value !== "") { + _html += '
'.format(value); + signObjects[json.id] = value; + } + $('#' + json.id + ' .layui-input-block').append(_html); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.sign)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + }, + }, dateRange: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _disabledStyle = json.disabled ? ' pointer-events: none;' : ''; + var _required = json.required ? 'required' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += '
'; + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.tag + json.id, _disabledStyle); + _html += '
'; + _html += ''.format(json.tag + json.id, _disabledClass, json.id, _required); + _html += '
'; + _html += '
-
'; + _html += '
'; + _html += ''.format(json.tag + json.id, _disabledClass, json.id, _required); + _html += '
'; + _html += '
'; + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.dateRange)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + }, + }, + rate: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _readonly = json.readonly ? 'readonly=""' : ''; + var _required = json.required ? 'required=""' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.labelWidth); + _html += '
'.format(json.labelWidth); + _html += '
'.format(json.tag + json.id); + _html += ''.format(json.id, json.defaultValue); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json, value) { + rate.render({ + elem: '#' + json.tag + json.id, + value: value, + text: json.text, + half: json.half, + length: json.rateLength, + readonly: json.readonly, + choose: function (_value) { + $("#" + json.id).find("input[name=" + json.id + "]").val(_value); + } + }); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.rate)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + carousel: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + // _html +=''.format(json.required?'layui-form-required':'',json.label); + // _html +='
'; + _html += '';//end for class=layui-coarousel + // _html +='
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.carousel)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + colorpicker: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth); + _html += '
'.format(json.labelWidth); + if (json.disabled) { + _html += '
'; + } + _html += '
'.format(json.tag + json.id); + _html += ''.format(json.id, json.defaultValue); + _html += '
'; + _html += '
'; + return _html; + }, + update: function (json, value) { + if (json.disabled) { + $("#" + json.id).find(".layui-input-block").append('
'); + } else { + $("#" + json.id).find(".iceEditor-disabled").remove(); + } + colorpicker.render({ + elem: '#' + json.tag + json.id + , color: value + , format: 'rgb' + , predefine: true + , alpha: true + , done: function (color) { + $("#" + json.id).find("input[name=" + json.id + "]").val(color); + } + }); + $("#" + json.id).find("input[name=" + json.id + "]").val(value); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.colorpicker)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + image: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label); + _html += '
'; + + _html += '
'; + _html += ''.format(json.tag + json.id); + _html += '
预览图：'; + _html += '
'.format(json.id); + _html += '
'; + _html += '
'; + _html += '
'; + + + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.image)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + } + }, + textarea: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _disabled = json.disabled ? 'disabled=""' : ''; + var _required = json.required ? 'lay-verify="required"' : ''; + var _readonly = json.readonly ? 'readonly=""' : ''; + var _disabledClass = json.disabled ? ' layui-disabled' : ''; + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.width); + _html += '
'.format(json.width); + _html += '' + .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly); + _html += '
'; + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.textarea)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + + } + }, + editor: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index, json.width); + _html += ''.format(json.label, json.width); + _html += '
'; + _html += '
'.format(json.tag + json.id); + _html += '
'; + // if(selected){ + // _html +='
'; + // } + _html += '
'; + return _html; + }, + update: function (json, value) { + var e = iceEditorObjects[json.id]; + e.setValue(value); + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.editor)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + return _json; + + } + }, + grid: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + var colClass = 'layui-col-md6'; + if (json.columns.length == 3) { + colClass = 'layui-col-md4'; + } else if (json.columns.length == 4) { + colClass = 'layui-col-md3'; + } else if (json.columns.length == 6) { + colClass = 'layui-col-md2'; + } + for (var i = 0; i < json.columns.length; i++) { + _html += '
'.format(i, json.index, colClass, json.id); + //some html + _html += '
'; + } + + // if(selected){ + // _html +='
'; + // } + _html += '
'; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID 默认是一个一行两列的布局对象 + var _json = JSON.parse(JSON.stringify(formField.grid)); + _json.id = id == undefined ? autoId(_json.tag) : id; + _json.index = index; + if (columncount > 2) { + var _col = { + span: 12, + list: [], + }; + for (var i = _json.columns.length; i < columncount; i++) { + _json.columns.splice(i, 0, _col); + } + } + return _json; + + } + }, + file: { + /** + * 根据json对象生成html对象 + * @param {object} json + * @param {boolean} selected true 表示选择当前 + * */ + render: function (json, selected) { + if (selected === undefined) { + selected = false; + } + var _html = '
'.format(json.id, json.tag, selected ? 'active' : '', json.index); + _html += ''.format(json.required ? 'layui-form-required' : '', json.label); + _html += '
'; + + _html += '
'; + _html += ' '.format(json.tag + json.id); + _html += '
'; + _html += ''; + _html += ''; + _html += '
文件名大小上传进度操作
'.format(json.tag + json.id); + _html += ''.format(json.tag + json.id); + _html += '
'; + _html += ''; + _html += '
'; + _html += '
'; + _html += ''; + return _html; + }, + /* 获取对象 */ + jsonData: function (id, index, columncount) { + //分配一个新的ID + var _json = JSON.parse(JSON.stringify(formField.file)); + _json.id = id == undefined ? guid() : id; + _json.index = index; + return _json; + + }, + /* 根据 json 对象显示对应的属性 */ + property: function (json) { + $('#columnProperty').empty(); + var _html = ''; + _html = renderCommonProperty(json);//获取通用属性HTML字符串 + //处理特殊字符串 + for (var key in json) { + if (key === 'index') { + continue; + } + + } + $('#columnProperty').append(_html); + } + }, + + }; + + + //渲染视图 + Class.prototype.render = function () { + var that = this + , options = that.config; + options.elem = $(options.elem); + options.id = options.id || options.elem.attr('id') || that.index; + options.elem.html('
'); + that.renderForm(); + + }; + + //获取表单数据回调 + Class.prototype.getFormData = function () { + //获取表单区域所有值 + var json = form.val("formPreviewForm"); + for (let key in iceEditorObjects) { + json[key] = iceEditorObjects[key].getHTML(); + } + for (let key in labelGenerationObjects) { + json[key] = labelGenerationObjects[key].getData(); + } + for (let key in signObjects) { + json[key] = signObjects[key]; + } + return json; + } + + /** + * 找到当前节点 + */ + Class.prototype.findJsonItem = function (json, id) { + var that = this, + options = that.config; + for (var i = 0; i < json.length; i++) { + if (json[i].id === id) { + return json[i]; + } else { + if (json[i].tag === 'grid') { + for (var j = 0; j < json[i].columns.length; j++) { + if (json[i].columns[j].list.length > 0) { + var _item = that.findJsonItem(json[i].columns[j].list, id); + if (_item) { + return _item; + } + } + } + } + } + } + } + + //全局禁用 + Class.prototype.globalDisable = function () { + var that = this + , options = that.config; + that.findItemToDisable(options.data); + that.renderForm(); + } + + //全局取消禁用 + Class.prototype.globalNoDisable = function () { + var that = this + , options = that.config; + that.findItemToNoDisable(options.data); + that.renderForm(); + } + + //递归改变禁用属性 + Class.prototype.findItemToDisable = function (jsondata) { + var that = this + , options = that.config; + $.each(jsondata, function (index, item) { + if (item.tag === 'grid') { + $.each(item.columns, function (index2, item2) { + //获取当前的 DOM 对象 + if (item2.list.length > 0) { + that.findItemToDisable(item2.list); + } + }); + } else { + item.disabled = true; + item.readonly = true; + } + }); + } + + //递归改变禁用属性 + Class.prototype.findItemToNoDisable = function (jsondata) { + var that = this + , options = that.config; + $.each(jsondata, function (index, item) { + if (item.tag === 'grid') { + $.each(item.columns, function (index2, item2) { + //获取当前的 DOM 对象 + if (item2.list.length > 0) { + that.findItemToNoDisable(item2.list); + } + }); + } else { + item.disabled = false; + item.readonly = false; + } + }); + } + + + //获取表单数据回调 + Class.prototype.setFormData = function (json) { + var that = this, + options = that.config; + //获取表单区域所有值 + for (let key in json) { + if (key.indexOf("[") != -1 && key.indexOf("]") != -1) { + var check = key.substring(0, key.indexOf("[")); + var item = that.findJsonItem(options.data, check); + if (item === undefined) { + continue; + } + that.components[item.tag].update(item); + continue; + } + var item = that.findJsonItem(options.data, key); + if (item === undefined) { + continue; + } + if (item.tag === 'editor' || item.tag === 'rate' + || item.tag === 'slider' || item.tag === 'labelGeneration' + || item.tag === 'sign' || item.tag === 'iconPicker' + || item.tag === 'cron' || item.tag === 'colorpicker') { + that.components[item.tag].update(item, json[key]); + } + } + form.val("formPreviewForm", json); + options.formData = json; + return json; + } + + + /* 递归渲染组件 */ + Class.prototype.renderComponents = function (jsondata, elem) { + var that = this + , options = that.config; + $.each(jsondata, function (index, item) { + item.index = index;//设置index 仅仅为了传递给render对象，如果存在下级子节点那么 子节点的也要变动 + if (options.selectItem === undefined) { + elem.append(that.components[item.tag].render(item, false)); + } else { + if (options.selectItem.id === item.id) { + elem.append(that.components[item.tag].render(item, true)); + //显示当前的属性 + that.components[item.tag].property(item); + } else { + elem.append(that.components[item.tag].render(item, false)); + } + } + if (item.tag === 'grid') { + $.each(item.columns, function (index2, item2) { + //获取当前的 DOM 对象 + if (item2.list.length > 0) { + var elem2 = $('#' + item.id + ' .widget-col-list.column' + item.id + index2); + that.renderComponents(item2.list, elem2); + } + }); + } else if (item.tag === 'slider') { + //定义初始值 + slider.render({ + elem: '#' + item.tag + item.id, + value: item.defaultValue, //初始值 + min: item.minValue, + max: item.maxValue, + step: item.stepValue, + disabled: item.disabled, + input: item.isInput, + change: function (value) { + $("#" + item.id).find("input[name=" + item.id + "]").val(value); + } + }); + } else if (item.tag === 'numberInput') { + //定义初始值 + numberInput.render({ + elem: '#' + item.tag + item.id + }); + var _width = item.width.replace(/[^\d]/g, ''); + if ('' != _width) { + _width = 100 - parseInt(_width); + } + $('#' + item.id + ' .layui-input-block .layui-number-input-btn').css("right", _width + "%"); + if (item.disabled) { + $('#' + item.id + ' .layui-input-block .layui-number-input-btn').css("z-index", "-1"); + } + } else if (item.tag === 'checkbox') { + var bool = false; + //定义初始值 + form.verify({ + otherReq: function (value, item) { + var verifyName = $(item).attr('name'), verifyType = $(item).attr('type') + , formElem = $(item).parents(".layui-form"), + verifyElem = formElem.find("input[name='" + verifyName + "']"), + verifyElems = formElem.find("input") + , isTrue = verifyElem.is(":checked"), + focusElem = verifyElem.next().find("i.layui-icon");//焦点元素 + for (let i = 0; i < verifyElems.length; i++) { + if (verifyElems[i].checked) { + return false; + } + } + if (!isTrue || !value) { + focusElem.css(verifyType == "radio" ? {"color": "#FF5722"} : {"border-color": "#FF5722"}); + //对非输入框设置焦点 + focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function () { + focusElem.css(verifyType == 'radio' ? {"color": ""} : {"border-color": ""}); + }).focus(); + return "必填项不能为空"; + } + } + }); + } else if (item.tag === 'date') { + laydate.render({ + elem: '#' + item.tag + item.id, + type: item.datetype, + format: item.dateformat, + value: item.dateDefaultValue, + min: item.dataMinValue, + max: item.dataMaxValue, + }); + } else if (item.tag === 'sign') { + $('#' + item.id + item.tag).click(function () { + layer.open({ + type: 2, + title: '手写签名', + btn: ['保存', '关闭'], //可以无限个按钮 + yes: function (index, layero) { + //do something + var iframe = window['layui-layer-iframe' + index]; + var data = iframe.getCanvasData(); + signObjects[item.id] = data; + item.data = data; + $('#' + item.id + ' .layui-input-block div').empty(); + var _html = '
'.format(item.data); + $('#' + item.id + ' .layui-input-block').append(_html); + layer.close(index); //如果设定了yes回调，需进行手工关闭 + }, + btn2: function (index, layero) { + layer.close(index); + }, + closeBtn: 1, //不显示关闭按钮 + shade: [0], + area: ['60%', '60%'], + offset: 'auto', //右下角弹出 + anim: 2, + content: ['./handwrittenSignature.html', 'yes'], //iframe的url，no代表不显示滚动条 + success: function (layero, index) { + } + }); + }); + } else if (item.tag === 'labelGeneration') { + var labelGenerationObject = labelGeneration.render({ + elem: '#' + item.tag + item.id, + data: item.dateDefaultValue, + isEnter: item.isEnter + }); + labelGenerationObjects[item.id] = labelGenerationObject; + } else if (item.tag === 'cron' && !item.disabled) { + cron.render({ + elem: "#" + item.tag + item.id + "-button", // 绑定元素 + url: item.cronUrl, // 获取最近运行时间的接口 + // value: $("#cron").val(), // 默认值 + done: function (cronStr) { + $("#" + item.tag + item.id).val(cronStr); + }, + }); + } else if (item.tag === 'iconPicker') { + iconPicker.render({ + // 选择器，推荐使用input + elem: '#' + item.tag + item.id, + // 数据类型：fontClass/unicode，推荐使用fontClass + type: 'fontClass', + // 是否开启搜索：true/false，默认true + search: item.iconPickerSearch, + // 是否开启分页：true/false，默认true + page: item.iconPickerPage, + // 每页显示数量，默认12 + limit: item.iconPickerLimit, + // 每个图标格子的宽度：'43px'或'20%' + cellWidth: item.iconPickerCellWidth, + // 点击回调 + click: function (data) { + //console.log(data); + }, + // 渲染成功后的回调 + success: function (d) { + //console.log(d); + } + }); + iconPicker.checkIcon(item.tag + item.id, item.defaultValue); + } else if (item.tag === 'dateRange') { + laydate.render({ + elem: '#' + item.tag + item.id, + type: item.datetype, + format: item.dateformat, + //value: item.dateDefaultValue, + min: item.dataMinValue, + max: item.dataMaxValue, + range: ['#start-' + item.tag + item.id, '#end-' + item.tag + item.id] + }); + if (item.dateRangeDefaultValue !== null && item.dateRangeDefaultValue !== "" + && item.dateRangeDefaultValue !== undefined) { + var split = item.dateRangeDefaultValue.split(" - "); + $('#start-' + item.tag + item.id).val(split[0]); + $('#end-' + item.tag + item.id).val(split[1]); + } + } else if (item.tag === 'rate') { + rate.render({ + elem: '#' + item.tag + item.id, + value: item.defaultValue, + text: item.text, + half: item.half, + length: item.rateLength, + readonly: item.readonly, + choose: function (value) { + $("#" + item.id).find("input[name=" + item.id + "]").val(value); + } + }); + } else if (item.tag === 'colorpicker') { + colorpicker.render({ + elem: '#' + item.tag + item.id + , color: item.defaultValue + , format: 'rgb' + , predefine: true + , alpha: true + , done: function (color) { + $("#" + item.id).find("input[name=" + item.id + "]").val(color); + } + }); + } else if (item.tag === 'editor') { + var e = new ice.editor(item.tag + item.id); + e.width = item.width; //宽度 + e.height = item.height; //高度 + e.uploadUrl = item.uploadUrl; //上传文件路径 + e.disabled = item.disabled; + e.menu = item.menu; + e.create(); + iceEditorObjects[item.id] = e; + } else if (item.tag === 'carousel') { + carousel.render({ + elem: '#' + item.tag + item.id, + width: item.width,//设置容器宽度 + height: item.height,//设置容器宽度 + arrow: item.arrow, //始终显示箭头 + interval: item.interval, + anim: item.anim, + autoplay: item.autoplay + }); + } else if (item.tag === 'image') { + var data = {"select": item.tag + item.id, "uploadUrl": item.uploadUrl}; + images.push(data); + } else if (item.tag === 'file') { + var data = {"select": item.tag + item.id, "uploadUrl": item.uploadUrl}; + files.push(data); + } + }); + }; + + /* 重新渲染设计区*/ + Class.prototype.renderForm = function () { + var that = this, options = that.config; + var elem = $('#formPreviewForm'); + //清空 + elem.empty(); + that.renderComponents(options.data, elem); + elem.append(TPL_SUBMIT); + that.setFormData(options.formData); + form.render();//一次性渲染表单 + if (options.data.length != 0) { + for (let i = 0; i < options.data.length; i++) { + if (options.data[i].tag === 'grid') { + for (let j = 0; j < options.data[i].columns.length; j++) { + for (let k = 0; k < options.data[i].columns[j].list.length; k++) { + if (options.data[i].columns[j].list[k].tag === 'select') { + $('#' + options.data[i].columns[j].list[k].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(options.data[i].columns[j].list[k].width)}); + } + } + } + } else { + if (options.data[i].tag === 'select') { + $('#' + options.data[i].id + ' .layui-input-block div.layui-unselect.layui-form-select').css({width: '{0}'.format(options.data[i].width)}); + } + } + } + } + }; + + + //核心入口 初始化一个 regionSelect 类 + formPreview.render = function (options) { + var ins = new Class(options); + return thisIns.call(ins); + }; + + exports('formPreview', formPreview); + + + }); \ No newline at end of file diff --git a/module-form/src/main/resources/static/form-design/modules/iceEditor/iceEditor.js b/module-form/src/main/resources/static/form-design/modules/iceEditor/iceEditor.js new file mode 100644 index 00000000..c7795f5d --- /dev/null +++ b/module-form/src/main/resources/static/form-design/modules/iceEditor/iceEditor.js @@ -0,0 +1,1918 @@ +'use strict'; +/** + +------------------------------------------------------------------------------------+ + + iceEditor(富文本编辑器) + +------------------------------------------------------------------------------------+ + + iceEditor v1.1.9 + * MIT License By www.iceui.cn + + 作者：ice + + 官方：www.iceui.cn + + 时间：2021-06-23 + +------------------------------------------------------------------------------------+ + + 版权声明：该版权完全归iceUI官方所有，可转载使用和学习，但请务必保留版权信息 + +------------------------------------------------------------------------------------+ + + iceEditor是一款简约风格的富文本编辑器，体型十分娇小，无任何依赖，整个编辑器只有一个 + + 文件，功能却很不平凡！简约的唯美设计，简洁、极速、使用它的时候不需要引用jQuery、font + + css……等文件，因为整个编辑器只是一个Js，支持上传图片、附件！支持添加音乐、视频！ + +------------------------------------------------------------------------------------+ + */ +var ice = ice || {}; +ice.editor = function (id,callback) { + class iceEditor { + constructor(id) { + //------------------------参数配置 开始------------------------ + // 工具栏菜单 + this.menu = [ + 'backColor', 'fontSize', 'foreColor', 'bold', 'italic', 'underline', 'strikeThrough', 'line', 'justifyLeft', + 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'line', 'insertOrderedList', 'insertUnorderedList', 'line', 'superscript', + 'subscript', 'createLink', 'unlink', 'line', 'hr', 'face', 'table', 'files', 'music', 'video', 'insertImage', + 'removeFormat', 'paste', 'line', 'code' + ]; + // 不需要的工具栏菜单 + this.notMenu = []; + // 文字背景颜色 + this.backColor = [ + '#ffffff', '#000000', '#eeece1', '#1f497d', '#4f81bd', '#c0504d', '#9bbb59', '#8064a2', '#4bacc6', '#f79646', + '#f2f2f2', '#979797', '#ddd9c3', '#c6d9f0', '#dbe5f1', '#f2dcdb', '#ebf1dd', '#e5e0ec', '#dbeef3', '#fdeada', + '#d8d8d8', '#595959', '#c4bd97', '#8db3e2', '#b8cce4', '#e5b9b7', '#d7e3bc', '#ccc1d9', '#b7dde8', '#fbd5b5', + '#bfbfbf', '#3f3f3f', '#938953', '#548dd4', '#95b3d7', '#d99694', '#c3d69b', '#b2a2c7', '#92cddc', '#fac08f', + '#a5a5a5', '#262626', '#494429', '#17365d', '#366092', '#953734', '#76923c', '#5f497a', '#31859b', '#e36c09', + '#7f7f7f', '#0c0c0c', '#1d1b10', '#0f243e', '#244061', '#632423', '#4f6128', '#3f3151', '#205867', '#974806', + '#c00000', '#ff0000', '#ffc000', '#ffff00', '#92d050', '#00b050', '#00b0f0', '#0070c0', '#002060', '#7030a0' + ]; + //文字颜色 + this.foreColor = this.backColor; + //编辑器的尺寸 + this.width = '100%'; + this.height = '400px'; + //查看源码 + this.code = 0; + //窗口最大化和最小化 + this.maxWindow = 1; + //编辑器禁用 + this.disabled = 0; + //编辑器样式 + this.css = ''; + //图片和附件提交地址 + this.uploadUrl = 0; + //纯文本粘贴 + this.pasteText = 1; + //截图粘贴启用 + this.screenshot = 1; + //截图粘贴直接上传到服务器 + this.screenshotUpload = 1; + //网络图片上传到服务器 + this.imgAutoUpload = 1; + //图片下载到本地的域名，默认为本地域名（false），其它域名为数组类型 + this.imgDomain = 0; + //上传监听 + this.ajax.uploadTimeout = 15000; //ajax超时时间 + this.ajax.xhr = function () {}; //ajax的xhr设置 + this.ajax.formData = function (e) {return e}; //ajax的formData设置 + this.ajax.timeout = function () {}; //ajax超时回调 + this.ajax.progress = function () {}; //ajax进度回调 + this.ajax.success = function (e) {return e}; //ajax成功回调 + this.ajax.error = function () {}; //ajax失败回调 + this.ajax.complete = function () {}; //ajax成功或失败都回调 + //上传附件 + this.filesUpload = {}; + this.filesUpload.name = 'file[]'; + this.filesUpload.formData = function (e) {return e}; + this.filesUpload.success = function (e) {return e}; + this.filesUpload.error = function () {}; + this.filesUpload.complete = function () {}; + //上传图片 + this.imgUpload = {}; + this.imgUpload.name = 'file[]'; + this.imgUpload.formData = function (e) {return e}; + this.imgUpload.success = function (e) {return e}; + this.imgUpload.error = function () {}; + this.imgUpload.complete = function () {}; + //表情 + this.face = [{ + title: '表情', + type: 'img', + list: [ + {title:'嘻嘻',content:'./ayq/images/tootha_thumb.gif'}, + {title:'哈哈',content:'./ayq/images/laugh.gif'}, + {title:'可爱',content:'./ayq/images/tza_thumb.gif'}, + {title:'可怜',content:'./ayq/images/kl_thumb.gif'}, + {title:'挖鼻屎',content:'./ayq/images/kbsa_thumb.gif'}, + {title:'吃惊',content:'./ayq/images/cj_thumb.gif'}, + {title:'害羞',content:'./ayq/images/shamea_thumb.gif'}, + {title:'挤眼',content:'./ayq/images/zy_thumb.gif'}, + {title:'闭嘴',content:'./ayq/images/bz_thumb.gif'}, + {title:'鄙视',content:'./ayq/images/bs2_thumb.gif'}, + {title:'爱你',content:'./ayq/images/lovea_thumb.gif'}, + {title:'泪',content:'./ayq/images/sada_thumb.gif'}, + {title:'偷笑',content:'./ayq/images/heia_thumb.gif'}, + {title:'亲亲',content:'./ayq/images/qq_thumb.gif'}, + {title:'生病',content:'./ayq/images/sb_thumb.gif'}, + {title:'太开心',content:'./ayq/images/mb_thumb.gif'}, + {title:'懒得理你',content:'./ayq/images/ldln_thumb.gif'}, + {title:'右哼哼',content:'./ayq/images/yhh_thumb.gif'}, + {title:'左哼哼',content:'./ayq/images/zhh_thumb.gif'}, + {title:'嘘',content:'./ayq/images/x_thumb.gif'}, + {title:'衰',content:'./ayq/images/cry.gif'}, + {title:'委屈',content:'./ayq/images/wq_thumb.gif'}, + {title:'吐',content:'./ayq/images/t_thumb.gif'}, + {title:'打哈欠',content:'./ayq/images/k_thumb.gif'}, + {title:'抱抱',content:'./ayq/images/bba_thumb.gif'}, + {title:'怒',content:'./ayq/images/angrya_thumb.gif'}, + {title:'疑问',content:'./ayq/images/yw_thumb.gif'}, + {title:'馋嘴',content:'./ayq/images/cza_thumb.gif'}, + {title:'拜拜',content:'./ayq/images/88_thumb.gif'}, + {title:'思考',content:'./ayq/images/sk_thumb.gif'}, + {title:'汗',content:'./ayq/images/sweata_thumb.gif'}, + {title:'困',content:'./ayq/images/sleepya_thumb.gif'}, + {title:'睡觉',content:'./ayq/images/sleepa_thumb.gif'}, + {title:'钱',content:'./ayq/images/money_thumb.gif'}, + {title:'失望',content:'./ayq/images/sw_thumb.gif'}, + {title:'酷',content:'./ayq/images/cool_thumb.gif'}, + {title:'花心',content:'./ayq/images/hsa_thumb.gif'}, + {title:'哼',content:'./ayq/images/hatea_thumb.gif'}, + {title:'鼓掌',content:'./ayq/images/gza_thumb.gif'}, + {title:'晕',content:'./ayq/images/dizzya_thumb.gif'}, + {title:'悲伤',content:'./ayq/images/bs_thumb.gif'}, + {title:'抓狂',content:'./ayq/images/crazya_thumb.gif'}, + {title:'黑线',content:'./ayq/images/h_thumb.gif'}, + {title:'阴险',content:'./ayq/images/yx_thumb.gif'}, + {title:'怒骂',content:'./ayq/images/nm_thumb.gif'}, + {title:'心',content:'./ayq/images/hearta_thumb.gif'}, + {title:'伤心',content:'./ayq/images/unheart.gif'}, + {title:'ok',content:'./ayq/images/ok_thumb.gif'}, + {title:'耶',content:'./ayq/images/ye_thumb.gif'}, + {title:'good',content:'./ayq/images/good_thumb.gif'}, + {title:'不要',content:'./ayq/images/no_thumb.gif'}, + {title:'赞',content:'./ayq/images/z2_thumb.gif'}, + {title:'来',content:'./ayq/images/come_thumb.gif'}, + {title:'弱',content:'./ayq/images/sad_thumb.gif'}, + {title:'蜡烛',content:'./ayq/images/lazu_thumb.gif'}, + {title:'蛋糕',content:'./ayq/images/cake.gif'} + ] + },{ + title: '文字', + type: 'text', + list: [{ + title: '开心', + content: '(^_^)' + }, + { + title: '受不了', + content: '(>_<)' + }, + { + title: '鄙视', + content: '(¬､¬)' + }, + { + title: '难过', + content: '(*>﹏<*)' + }, + { + title: '可爱', + content: '(｡◕‿◕｡)' + }, + { + title: '无奈', + content: '╮(╯_╰)╭' + }, + { + title: '惊喜', + content: '╰(*°▽°*)╯' + }, + { + title: '听音乐', + content: '♪(^∇^*)' + }, + { + title: '害羞', + content: '(✿◡‿◡)' + }, + { + title: '睡啦', + content: '(∪｡∪)..zzZ' + }, + { + title: '臭美', + content: '(o≖◡≖)' + }, + { + title: '流汗', + content: '(ーー゛)' + } + ] + }]; + //HTML标签过滤黑名单-忽略粘贴过来的HTML标签 + this.filterTag = ['meta', 'script', 'object', 'form', 'iframe']; + //style过滤黑名单-忽略粘贴过来的style样式 + this.filterStyle = ['background-image']; + //块级元素 + this.blockTag = ['address', 'caption', 'dd', 'div', 'dl', 'dt', 'fieldset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'fieldset', 'li', 'noframes', 'noscript', 'ol', 'ul', 'p', 'pre', 'table', 'tbody', 'tfoot', 'th', 'thead', 'tr', 'video']; + //------------------------参数配置 结束------------------------ + //构建功能模块唯一id + this.getTime = '1' + String(new Date().getTime()).substr(4, 8); + this.iframeId = '_iframe' + this.getTime; + this.toolId = '_tool' + this.getTime; + this.linkId = '_link' + this.getTime; + this.linkInputId = '_LinkInput' + this.getTime; + this.musicId = '_music' + this.getTime; + this.musicInputId = '_musicInput' + this.getTime; + this.videoId = '_video' + this.getTime; + this.imageId = '_image' + this.getTime; + this.imgUploadId = '_imgUpload' + this.getTime; + this.filesId = '_files' + this.getTime; + this.filesUploadId = '_filesUpload' + this.getTime; + this.tableId = '_table' + this.getTime; + this.dragId = '_drag' + this.getTime; + + //菜单列表对象 + this.menuList = {}; + + //获取编辑器对象 + var _z = this; + this.editor = this.id(id); + if (!this.editor) return alert('请提供一个有效的id'); + this.textarea = 0; + // 只能是 textarea 和 div ，其他类型的元素不行 + if (this.editor.nodeName !== 'TEXTAREA' && this.editor.nodeName !== 'DIV') { + return console.log('iceEditor：暂不支持该标签「' + this.editor.nodeName + '」，推荐使用div或textarea'); + } + if (this.editor.nodeName == 'TEXTAREA') { + this.editor.style.display = 'none'; + this.divId = '_div' + this.getTime; + var div = this.c('div'); + div.className = 'iceEditor'; + div.id = this.divId; + this.insertAfter(div, this.editor); + + //加载编辑器的内容 + this.textarea = this.editor; + this.editor = this.id(this.divId); + this.value = this.textarea.value; + } else { + this.editor.className = 'iceEditor'; + this.value = this.editor.innerHTML; + this.editor.innerHTML = ''; + } + + //创建编辑器配置样式 + this.cssConfig = this.c('style'); + this.cssConfig.type = 'text/css'; + this.editor.appendChild(this.cssConfig); + + //创建编辑器菜单栏 + this.tool = this.c('div'); + this.tool.id = this.toolId; + this.tool.className = 'iceEditor-tool iceEditor-noselect'; + this.editor.appendChild(this.tool); + + //创建iframe + this.iframe = this.c('iframe'); + this.iframe.id = this.iframeId; + this.iframe.className = 'iceEditor-noselect'; + this.iframe.frameBorder = 0; + this.editor.appendChild(this.iframe); + + //创建可拖拽层 + this.dragBg = this.c('div'); + this.dragBg.className = 'iceEditor-dragBg'; + this.editor.appendChild(this.dragBg); + + //创建编辑器的高度可拖拽容器 + this.drag = this.c('div'); + this.drag.id = this.dragId; + this.drag.className = 'iceEditor-drag iceEditor-noselect'; + this.drag.innerHTML = ''; + this.editor.appendChild(this.drag); + + //编辑器拖拽增高 + this.drag.onmousedown = function (e) { + _z.dragBg.style.display = 'block'; + var y = e.clientY; + var ch = _z.iframe.clientHeight; + window.onmousemove = function (e) { + var h = e.clientY - y; + if (ch >= 100) { + _z.iframe.height = ch + h + 'px'; + _z.height = ch + h + 'px'; + } else { + _z.iframe.height = '100px'; + _z.height = ch + h + 'px'; + } + } + window.onmouseup = function () { + window.onmousemove = null; + window.onmouseup = null; + _z.dragBg.style.display = 'none'; + } + } + + //创建禁用编辑器的遮罩 + this.disableds = this.c('div'); + this.disableds.className = 'iceEditor-disabled'; + this.editor.appendChild(this.disableds); + + //获取iframe对象 + this.w = this.iframe.contentWindow; //获取iframe Window 对象 + this.d = this.iframe.contentDocument; //获取iframe documen 对象 + + //为了兼容万恶的IE 创建iframe中的body + this.d.open(); + var value = this.value.trim(); + if (!value.length || value.substr(0, 3) != '

') value = '

' + this.value + '

'; + this.d.write('' + value + ''); + this.d.close(); + + // 设置元素为可编辑 + this.d.body.designMode = 'on'; //打开设计模式 + this.d.body.contentEditable = true; // 设置元素为可编辑 + this.d.body.addEventListener('click', function () { + _z.parentTagName = _z.range.anchorNode.parentNode.tagName; + for (var i = 0; i < _z.menu.length; i++) { + if (_z.menu[i] == 'line') continue; + var a = _z.menuList[_z.menu[i]]; + if (_z.d.queryCommandState(_z.menu[i])) { + a.className = 'iceEditor-actives'; + } else { + if (a.className != 'iceEditor-line' && a.className != 'iceEditor-active-s') a.className = ''; + } + } + }) + + //内容区 + this.content = this.d.body; + + //改变textarea内容 + if (this.textarea) { + setInterval(function () { + _z.setTextarea(); + }, 1000); + } + + this.init(); //初始化参数 + this.create(); //创建编辑器 + this.paste(); //监听粘贴 + this.styleInit(); //渲染样式 + callback && callback.call(this); + } + id(a) { + return document.getElementById(a) + } + c(a) { + return document.createElement(a) + } + //初始化参数 + init() { + this.files = null; + this.insertImage = null; + this.element = this.d.body; + //this.element.focus(); //默认获取焦点 + this.range = this.d.createRange ? this.w.getSelection() : this.d.selection.createRange(); + } + //设置textarea + setTextarea(n, obj) { + if (!this.textarea) return; + var html = this.code ? this.html(this.getHTML()) : this.getHTML(); + html = html.replace(/(.*?)<\/pre>/gi, function (all, a = '', b = '') { + return '' + b.split('
').join("\n") + ''; + }); + this.textarea.value = html; + } + //dom后面插入节点 + insertAfter(n, obj) { + var parent = obj.parentNode; + if (parent.lastChild == obj) { + parent.appendChild(n, obj); + } else { + parent.insertBefore(n, obj.nextSibling); + } + } + //插入HTML + setHTML(html, a) { + this.element.focus(); + var range = this.range.getRangeAt(0); + //将选中的文档放在html中的DOM内 + if (!a) html.appendChild(range.extractContents()); + //删除选中的内容 + range.deleteContents(); + //创建文档碎片并放入新节点 + range.insertNode(this.w.document.createDocumentFragment().appendChild(html)); //合并范围至末尾 + //合并范围至末尾 + range.collapse(false); + } + //插入文字内容 + setText(text, a) { + this.element.focus(); + var range = this.range.getRangeAt(0); + range.deleteContents(); + var el = document.createElement('div'); + if (a) { //是否为html + el.innerHTML = text; + } else { + el.appendChild(document.createTextNode(text)); + } + var frag = document.createDocumentFragment(), + node, lastNode; + while ((node = el.firstChild)) { + lastNode = frag.appendChild(node); + } + range.insertNode(frag); + if (lastNode) { + range = range.cloneRange(); + range.setStartAfter(lastNode); + range.collapse(true); + this.range.removeAllRanges(); + this.range.addRange(range); + } + range.collapse(true); + } + //获取选中的HTML + getSelectHTML() { + var p = this.c('p'); + p.appendChild(this.range.getRangeAt(0).cloneContents()); + return p.innerHTML; + } + //获取选中的内容 + getSelectText() { + if (this.range.toString() == 'false' || this.range.toString() == '') { + return ''; + } else { + return this.range.toString(); + } + } + unhtml(str) { + var s = ''; + if (str.length == 0) return ''; + s = str.replace(/&/g, "&"); + s = s.replace(//g, ">"); + s = s.replace(/\'/g, "'"); + s = s.replace(/\"/g, '"'); + return s; + } + html(str) { + var s = ''; + if (str.length == 0) return ''; + s = str.replace(/</g, "<"); + s = s.replace(/>/g, ">"); + s = s.replace(/'/g, "\'"); + s = s.replace(/"/g, "\""); + s = s.replace(/&/g, "&"); + return s; + } + //转义：HTML转成字符串 + toText(html) { + var temp = this.c('div'); + (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html); + var output = temp.innerHTML; + temp = null; + return output; + } + //转义：字符串转成HTML + toHTML(text) { + var temp = this.c('div'); + temp.innerHTML = text; + var output = temp.innerText || temp.textContent; + temp = null; + return output; + } + //判断祖先节点是否存在 + inNodeParent(el, parent) { + if (!el) return false; + if (el.parentNode) { + if (typeof parent == 'string') { + parent = parent.toUpperCase(); + if (el.tagName == parent) return true; + return el.parentNode.tagName == parent ? true : this.inNodeParent(el.parentNode, parent); + } else { + return el.parentNode == parent ? true : this.inNodeParent(el.parentNode, parent); + } + } + return false; + } + //数组查询 + inArray(needle, array) { + if (typeof needle == 'string' || typeof needle == 'number') { + for (var i in array) + if (needle === array[i]) return true; + return false; + } + } + // 获取 range 对象 + getRangegetRange() { + return this.range.getRangeAt(0); + } + //弹窗 + popup(options) { + options = options || {}; + var width = options.width || '400'; //默认宽度 + var height = options.height || '200'; //默认高度 + var title = options.title || ''; //默认不显示标题 + var content = options.content || ''; //默认内容 + return '
' + title + '╳
' + content + '
'; + } + //获取对象距离窗口页面的顶部和左部的距离 + getCoords(el) { + var box = el.getBoundingClientRect(), + doc = el.ownerDocument, + body = doc.body, + html = doc.documentElement, + clientTop = html.clientTop || body.clientTop || 0, + clientLeft = html.clientLeft || body.clientLeft || 0, + top = box.top - clientTop, + left = box.left - clientLeft; + return { + 'top': top, + 'left': left + }; + } + //阻止冒泡 + pd(event) { + window.event ? window.event.cancelBubble = true : e.stopPropagation(); + } + //是否为ie + isIE() { + return !!window.ActiveXObject || "ActiveXObject" in window + } + //异步请求 + ajax(json) { + var _z = this; + json = json || {}; + if (!json.url) return; + json.timeout = json.timeout || _z.ajax.uploadTimeout; + json.data = json.data || {}; + var json2url = function (json) { + var arr = []; + for (var name in json) { + arr.push(name + '=' + encodeURIComponent(json[name])); + } + return arr.join('&'); + } + + //创建 + var xhr = new XMLHttpRequest(); + //xhr.withCredentials = false; + //连接 和 发送 - 第二步 + + //监听进度事件 + xhr.addEventListener('progress', progress, false); + + xhr.open('POST', json.url, true); + //设置表单提交时的内容类型 + xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); + if (json.data instanceof FormData == false) { + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + }else{ + json.data = _z.ajax.formData(json.data); + } + _z.ajax.xhr(xhr); + xhr.send(json.data instanceof FormData ? json.data : json2url(json.data)); + + //接收 - 第三步 + json.loading && json.loading(); + json.timer = setTimeout(function () { + xhr.onreadystatechange = null; + _z.ajax.timeout(xhr); + json.error && json.error('网络超时。'); + }, json.timeout); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4 && xhr.status === 200) { + clearTimeout(json.timer); + if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { + var res = ''; + if (xhr.responseText.length > 0) res = JSON.parse(xhr.responseText); + let newRes = _z.ajax.success(res, xhr); + res = newRes?newRes:res; + _z.ajax.complete(res, xhr); + json.success && json.success(res); + } else { + _z.ajax.error(xhr); + _z.ajax.complete(xhr); + json.error && json.error(xhr); + } + } else { + _z.ajax.error(xhr); + _z.ajax.complete(xhr); + } + + }; + //上传进度 + function progress(evt) { + var percent = 0; + //百分比 + percent = evt.lengthComputable ? Math.round(evt.loaded / evt.total * 100) : 0; + _z.ajax.progress(percent, evt, xhr); + } + } + //创建菜单 + createMenu(json) { + var _z = this; + var li = this.c('li'); + if (json.id) li.id = json.id; + if (json.css) li.className = json.css; + if (json.style) this.css += json.style; + //将菜单设置成文字或者图标 + if (json.menu || json.icon) { + var div = this.c('div'); + if (json.title) div.title = json.title; + div.className = 'iceEditor-exec'; + if (json.menu) { + div.innerHTML = json.menu; + } else { + if (json.icon) div.innerHTML = ''; + } + if (json.data) div.setAttribute('data', json.data); + li.appendChild(div); + } + //使用下拉菜单 + if (json.dropdown) { + var div = this.c('div'); + div.className = 'iceEditor-menuDropdown'; + div.innerHTML = json.dropdown; + li.appendChild(div); + li.openMenu = 1; + li.onmouseover = function () { + if (li.openMenu) div.className = 'iceEditor-menuDropdown iceEditor-menuActive'; + } + li.onmouseout = function () { + div.className = 'iceEditor-menuDropdown'; + } + var exec = div.getElementsByClassName('iceEditor-exec'); + for (var i = 0; i < exec.length; i++) { + exec[i].addEventListener('click', function () { + div.className = 'iceEditor-menuDropdown'; + li.openMenu = 0; + setTimeout(function () { + li.openMenu = 1 + }, 500); + }) + } + } + //使用弹窗 + if (json.popup) { + li.innerHTML += this.popup(json.popup); + li.popup = li.getElementsByClassName('iceEditor-popup')[0]; + li.onclick = function () { + li.popup.style.display = 'block'; + li.popup.getElementsByClassName('iceEditor-popupClose')[0].onclick = function () { + li.popup.style.display = 'none'; + _z.pd(); + } + } + li.close = function () { + li.popup.style.display = 'none'; + _z.pd(); + } + } + li.success = json.success ? json.success : false; + //菜单的点击事件 + if (json.click) li.onclick = function () { + json.click(this, _z) + }; + this.menuList[json.name] = li; + } + //插件开发 + plugin(json) { + if (json.name == undefined) return console.log('plugin：menu参数不能为空'); + if (this.inArray(json.name, this.menu)) return console.log('plugin：menu已经存在，请重新命名'); + this.menu.push(json.name); + this.createMenu(json); + } + //工具栏菜单HTML + menuHTML() { + //文字大小 + this.createMenu({ + title: '文字大小', + name: 'fontSize', + icon: 'fontSize', + dropdown: '
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 文字大小
' + }); + + //文字背景颜色 + var html = '
    '; + for (var i = 0; i < this.backColor.length; i++) { + html += '
    • '; + } + html += '
  • 文字背景颜色
'; + this.createMenu({ + title: '文字背景颜色', + name: 'backColor', + icon: 'backColor', + dropdown: html + }); + + //文字颜色 + var html = '
    '; + for (var i = 0; i < this.foreColor.length; i++) { + html += '
    • '; + } + html += '
  • 文字颜色
'; + this.createMenu({ + title: '文字颜色', + name: 'foreColor', + icon: 'foreColor', + dropdown: html + }); + + //加粗 + this.createMenu({ + title: '加粗', + name: 'bold', + data: 'bold', + icon: 'bold' + }); + //倾斜 + this.createMenu({ + title: '倾斜', + name: 'italic', + data: 'italic', + icon: 'italic' + }); + //下划线 + this.createMenu({ + title: '下划线', + name: 'underline', + data: 'underline', + icon: 'underline' + }); + //删除线 + this.createMenu({ + title: '删除线', + name: 'strikeThrough', + data: 'strikeThrough', + icon: 'strike' + }); + //左对齐 + this.createMenu({ + title: '左对齐', + name: 'justifyLeft', + data: 'justifyLeft', + icon: 'alignleft' + }); + //居中对齐 + this.createMenu({ + title: '居中对齐', + name: 'justifyCenter', + data: 'justifyCenter', + icon: 'aligncenter' + }); + //右对齐 + this.createMenu({ + title: '右对齐', + name: 'justifyRight', + data: 'justifyRight', + icon: 'alignright' + }); + //缩进 + this.createMenu({ + title: '缩进', + name: 'indent', + data: 'indent', + icon: 'indent' + }); + //取消缩进 + this.createMenu({ + title: '取消缩进', + name: 'outdent', + data: 'outdent', + icon: 'outdent' + }); + //有序列表 + this.createMenu({ + title: '有序列表', + name: 'insertOrderedList', + data: 'insertOrderedList', + icon: 'orderedlist' + }); + //无序列表 + this.createMenu({ + title: '无序列表', + name: 'insertUnorderedList', + data: 'insertUnorderedList', + icon: 'unorderedlist' + }); + //下标 + this.createMenu({ + title: '下标', + name: 'subscript', + data: 'subscript', + icon: 'subscript' + }); + //上标 + this.createMenu({ + title: '上标', + name: 'superscript', + data: 'superscript', + icon: 'superscript' + }); + //取消连接 + this.createMenu({ + title: '取消连接', + name: 'unlink', + data: 'unlink', + icon: 'unlink' + }); + //添加水平线 + this.createMenu({ + title: '添加水平线', + name: 'hr', + data: 'insertHorizontalRule', + icon: 'min' + }); + //清除格式 + this.createMenu({ + title: '清除格式', + name: 'removeFormat', + data: 'removeFormat', + icon: 'remove' + }); + //富文本粘贴 + this.createMenu({ + title: '富文本粘贴', + name: 'paste', + icon: 'word', + success: function (e, z) { + if (!z.pasteText) e.className = 'iceEditor-active-s'; + e.onclick = function () { + z.pasteText = z.pasteText ? false : true; + e.className = z.pasteText ? '' : 'iceEditor-active-s'; + } + + } + }); //pasteText + //全选 + this.createMenu({ + title: '全选', + name: 'selectAll', + data: 'selectAll', + icon: 'empty' + }); + //查看源码 + this.createMenu({ + title: '查看源码', + name: 'code', + icon: 'code', + data: 'code' + }); + + //插入表情 + var html = '
'; + for (var i = 0; i < this.face.length; i++) { + html += '' + this.face[i].title + ''; + } + html += '
'; + for (var i = 0; i < this.face.length; i++) { + html += '
'; + for (var s = 0; s < this.face[i].list.length; s++) { + if (this.face[i].type == 'img') { + html += ''; + } else { + html += '' + this.face[i].list[s].content + ''; + } + } + html += '
'; + } + html += '
'; + this.createMenu({ + title: '插入表情', + name: 'face', + icon: 'face', + dropdown: html, + success: function (e, z) { + var titleBox = e.getElementsByClassName('iceEditor-faceTitle')[0]; + var title = titleBox.getElementsByTagName('span'); + var main = e.getElementsByClassName('iceEditor-faceMain')[0]; + var list = e.getElementsByClassName('iceEditor-faceList'); + var pace = main.getElementsByTagName('span'); + for (var i = 0; i < pace.length; i++) { + pace[i].onclick = function () { + z.setText(' ' + this.innerHTML + ' ', true); + } + } + for (var i = 0; i < title.length; i++) { + title[i].i = i; + title[i].onclick = function () { + for (var s = 0; s < title.length; s++) { + list[s].className = 'iceEditor-faceList'; + title[s].className = ''; + } + list[this.i].className = 'iceEditor-faceList iceEditor-faceActive'; + title[this.i].className = 'iceEditor-faceActive'; + } + } + title[0].className = 'iceEditor-faceActive'; + list[0].className = 'iceEditor-faceList iceEditor-faceActive'; + }, + style: ` + .iceEditor-face{width:310px;} + .iceEditor-face span{cursor:pointer;} + .iceEditor-faceTitle{border:2px solid #f7f7f7;} + .iceEditor-faceTitle span{display:inline-block;padding:5px 10px;margin-bottom:-2px;} + .iceEditor-faceTitle .iceEditor-faceActive{border-bottom:2px solid #333;} + .iceEditor-faceMain{padding:15px 10px;} + .iceEditor-faceList{display:none;width:100%;} + .iceEditor-faceList.iceEditor-faceActive{display:block;} + .iceEditor-faceList span{margin:3px 7px;display:inline-block;} + .iceEditor-faceList .iceEditor-faceText{min-width:80px;text-align:center;} + ` + }); + + //表格 + this.createMenu({ + title: '表格', + name: 'table', + icon: 'table', + dropdown: '
  • 表格：1×1
', + success: function (e, z) { + //表格 + z.table = z.id(z.tableId); + var tableBox = z.table.getElementsByClassName('iceEditor-tableBox')[0]; + var tableBgOn = z.table.getElementsByClassName('iceEditor-tableBgOn')[0]; + var tableNum = z.table.getElementsByClassName('iceEditor-tableNum')[0]; + tableBox.onmouseover = function (ev) { + var o = z.getCoords(this), + r = 1, + c = 1; + this.onmousemove = function (ev) { + var Event = ev || event; + var x = Event.clientX - o.left - 5; + var y = Event.clientY - o.top - 5; + if (x <= 180 && y <= 180) { + r = Math.ceil(x / 18); + c = Math.ceil(y / 18); + tableBgOn.style.width = r * 18 + 'px'; + tableBgOn.style.height = c * 18 + 'px'; + tableNum.innerHTML = '表格：' + r + "×" + c + } + } + this.onmousedown = function () { + var tableNode = z.c('table'); + tableNode.width = '100%'; + tableNode.border = 1; + tableNode.style.border = '1px solid #bdbdbd'; + tableNode.style.borderSpacing = 0; + tableNode.style.borderCollapse = 'collapse'; + tableNode.className = 'table table-border'; + for (var x = 0; x < c; x++) { + var trNode = tableNode.insertRow(); + for (var y = 0; y < r; y++) { + var tdNode = trNode.insertCell(); + tdNode.innerHTML = '
'; + } + } + z.setHTML(tableNode, true); + } + this.onmouseout = function () { + this.onmousemove = null; + this.onmouseout = null; + } + } + } + }); + //添加链接 + this.createMenu({ + title: '添加链接', + name: 'createLink', + icon: 'link', + id: this.linkId, + popup: { + width: 320, + height: 110, + title: '添加链接', + content: '
确定
' + }, + success: function (e, z) { + z.link = z.id(z.linkId); + z.linkInput = z.id(z.linkInputId); + z.link.getElementsByClassName('iceEditor-btn')[0].onclick = function () { + //如果选中的内容存在a标签的话，删除 + var str = z.getSelectHTML().replace(/]+>/ig, '').replace(/<\s*\/a\s*>/ig, ''); + var a = z.c('a'); + if (z.link.getElementsByTagName('input')[1].checked) a.target = '_blank'; + a.href = z.linkInput.value; + a.innerHTML = str; + z.setHTML(a, true); + z.link.getElementsByClassName('iceEditor-popup')[0].style.display = 'none'; + z.pd(); + } + } + }); + //添加音乐 + this.createMenu({ + title: '添加音乐', + name: 'music', + icon: 'music', + id: this.musicId, + popup: { + width: 320, + height: 80, + title: '添加音乐', + content: '
确定
' + }, + success: function (e, z) { + z.music = z.id(z.musicId); + z.musicInput = z.id(z.musicInputId); + z.music.getElementsByClassName('iceEditor-btn')[0].onclick = function () { + var a = z.c('audio'); + a.src = z.musicInput.value; + a.controls = 'controls'; + z.setHTML(a, true); + z.music.getElementsByClassName('iceEditor-popup')[0].style.display = 'none'; + z.pd(); + } + } + }); + //附件上传 + this.createMenu({ + title: '附件上传', + name: 'files', + icon: 'files', + id: this.filesId, + popup: { + width: 320, + height: 200, + title: '附件上传', + content: '
' + }, + success: function (e, z) { + z.files = z.id(z.filesId); + var close = z.files.getElementsByClassName('iceEditor-popup')[0]; + z.id(z.filesUploadId).onchange = function () { + if (!z.uploadUrl) return alert('请配置uploadUrl项'); + var formData = new FormData(); + for (var i = 0; i < this.files.length; i++) { + formData.append(z.filesUpload.name, this.files[i]); + } + formData = z.filesUpload.formData(formData); + z.ajax({ + url: z.uploadUrl, + data: formData, + success: function (res) { + if (res) { + for (var f = 0; f < res.length; f++) { + var obj = res[f]; + if (obj.error) { + z.filesUpload.error(obj, res); + z.filesUpload.complete(obj, res); + alert(obj.error); + } else { + obj = z.filesUpload.success(obj, res); + var a = z.c("a"); + a.href = obj.url; + a.className = 'download'; + a.download = obj.name; + a.innerText = obj.name; + a.target = '_blank'; + z.setHTML(a, true); + z.filesUpload.complete(obj, res); + } + } + close.style.display = 'none'; + } else { + z.filesUpload.error(res); + z.filesUpload.complete(res); + } + }, + error: function (xhr) { + z.filesUpload.error(xhr); + z.filesUpload.complete(xhr); + } + }) + } + } + }); + + //添加图片 + this.createMenu({ + title: '添加图片', + name: 'insertImage', + icon: 'pic', + id: this.imageId, + popup: { + width: 320, + height: 250, + title: '图片上传', + content: '
确定
' + }, + success: function (e, z) { + z.insertImage = z.id(z.imageId); + var close = z.insertImage.getElementsByClassName('iceEditor-popup')[0]; + //输入连接插入图片 + var url = z.insertImage.getElementsByClassName('iceEditor-insertImageUrl')[0]; + var width = z.insertImage.getElementsByClassName('iceEditor-inputWidth')[0]; + var height = z.insertImage.getElementsByClassName('iceEditor-inputHeight')[0]; + var btn = z.insertImage.getElementsByClassName('iceEditor-btn')[0]; + //绑定输入连接 + btn.onclick = function () { + var img = z.c('img'); + img.src = url.value; + if (width.value.trim()) img.width = width.value.trim(); + if (height.value.trim()) img.height = height.value.trim(); + z.setHTML(img); + close.style.display = 'none'; + z.pd(); + } + //上传图片 + z.id(z.imgUploadId).onchange = function () { + if (!z.uploadUrl) return alert('请配置uploadUrl项'); + var formData = new FormData(); + for (var i = 0; i < this.files.length; i++) { + formData.append(z.imgUpload.name, this.files[i]); + } + formData = z.imgUpload.formData(formData); + z.ajax({ + url: z.uploadUrl, + data: formData, + success: function (res) { + if (res) { + for (var f = 0; f < res.length; f++) { + var obj = res[f]; + if (obj.error) { + z.imgUpload.error(obj, res); + z.imgUpload.complete(obj, res); + alert(obj.error); + } else { + obj = z.imgUpload.success(obj, res); + var a = z.c('img'); + a.src = obj.url; + z.setHTML(a, true); + z.imgUpload.success(obj, res); + z.imgUpload.complete(obj, res); + } + } + close.style.display = 'none'; + } else { + z.imgUpload.error(res); + z.imgUpload.complete(res); + } + } + }) + } + } + }); + //添加视频 + this.createMenu({ + title: '添加视频', + name: 'video', + icon: 'video', + id: this.videoId, + popup: { + width: 320, + height: 170, + title: '添加视频', + content: '
URL：
确定
' + }, + success: function (e, z) { + z.video = z.id(z.videoId); + var type; + var close = z.video.getElementsByClassName('iceEditor-popup')[0]; + var url = z.video.getElementsByClassName('iceEditor-videoUrl')[0]; + var width = z.video.getElementsByClassName('iceEditor-inputWidth')[0]; + var height = z.video.getElementsByClassName('iceEditor-inputHeight')[0]; + var btn = z.video.getElementsByClassName('iceEditor-btn')[0]; + btn.onclick = function () { + if (!url.value.length) return alert('视频地址不能为空'); + var v = z.c('iframe'); + v.width = width.value.length ? width.value : 510; + v.height = height.value.length ? height.value : 498; + v.setAttribute('frameborder', 0); + v.setAttribute('allowfullscreen', true); + var error = '抱歉，无法处理该链接！'; + var domain = /^http(s)?:\/\/(.*?)\//.exec(url.value) // 正则出域名 + if (domain.length == 3) { + if (domain[2] == 'www.bilibili.com' || domain[2] == 'bilibili.com') { // bilibili + //源地址：https://www.bilibili.com/video/BV1UZ4y1g7De?spm_id_from=333.851.b_7265706f7274466972737431.11 + //处理地址：https://player.bilibili.com/player.html?bvid=BV1UZ4y1g7De + id = /video\/(.*?)\?/g.exec(url.value) + if (!id) { + id = /video\/(.*)/g.exec(url.value) + } + v.src = 'https://player.bilibili.com/player.html?bvid=' + id[1]; + } else if (domain[2] == 'v.youku.com') { // youku + //源地址：https://v.youku.com/v_show/id_XNTAwOTI4MzUxNg==.html + //处理地址：https://player.youku.com/embed/XMjM0ODA3NjIw + var id = url.value.split('.html'); + if (id.length > 1) { + id = id[0].split('id_'); + if (id.length > 1 && id[1].length) { + v.src = 'https://player.youku.com/embed/' + id[1]; + } else { + return alert('优酷：' + error); + } + } else { + return alert('优酷：' + error); + } + } else if (domain[2] == 'www.ixigua.com') { //西瓜视频 + id = /[0-9]{6,}/g.exec(url.value) + v.src = 'https://www.ixigua.com/iframe/' + id[0]; + } else { + v = z.c('video'); + v.src = url.value; + v.width = width.value.length ? width.value : 510; + v.height = height.value.length ? height.value : 498; + v.controls = 'controls'; + } + } else { + return alert('URL地址不合法！'); + } + z.setHTML(v, true); + close.style.display = 'none'; + z.pd(); + } + } + }); + //窗口最大化 + this.createMenu({ + title: '最大化', + name: 'max', + icon: 'max', + data: 'max', + css: 'iceEditor-maxWindow' + }); + //窗口最小化 + this.createMenu({ + title: '最小化', + name: 'min', + icon: 'min', + data: 'min', + css: 'iceEditor-minWindow' + }); + //菜单栏禁止 + this.createMenu({ + name: 'disabled', + css: 'iceEditor-disabledMask' + }); + } + //格式化菜单栏 + menuFormat() { + var _z = this; + this.menuHTML(); + var ul = this.c('ul'); + ul.className = 'iceEditor-menu'; + this.tool.innerHTML = ''; //防止重复创建 + this.tool.appendChild(ul); + //添加菜单 + for (var i = 0; i < this.menu.length; i++) { + if (this.menu[i] == 'line') { //分割线 + var line = _z.c('li'); + line.className = 'iceEditor-line'; + ul.appendChild(line); + continue; + } + if (this.notMenu.indexOf(this.menu[i]) == -1) { + ul.appendChild(this.menuList[this.menu[i]]); + if (this.menuList[this.menu[i]].success) { + this.menuList[this.menu[i]].success(this.menuList[this.menu[i]], _z); + } + } + } + if (this.maxWindow) { + ul.appendChild(this.menuList.max); + ul.appendChild(this.menuList.min); + } + ul.appendChild(this.menuList.disabled); + + //根据菜单配置来初始化菜单功能 ---结束--- + //初始化编辑器尺寸 + this.editor.style.width = this.width; + this.iframe.width = this.width; + this.iframe.height = this.height; + } + //设置菜单的功能 + menuAction() { + var menu = this.tool.getElementsByClassName('iceEditor-exec'); + var _z = this; + for (var i = 0; i < menu.length; i++) { + menu[i].e = this; + menu[i].attr = menu[i].getAttribute('data'); + if (menu[i].attr) { + menu[i].onclick = function () { + //anchorNode 返回选中内容前节点内的内容 + switch (this.attr) { + //删除线 + case 'strikeThrough': + var parent = _z.range.anchorNode.parentNode; + if (parent.style.textDecoration == 'line-through') { + var content = _z.range.anchorNode.parentNode.innerHTML; + parent.parentNode.removeChild(parent); + _z.setText(content, true); + } else { + var a = _z.c('span'); + a.style.textDecoration = 'line-through'; + _z.setHTML(a); + } + break; + //查看源代码 + case 'code': + var d = _z.tool.getElementsByClassName('iceEditor-disabledMask')[0]; + _z.code = _z.code ? 0 : 1; + if (_z.code) { + _z.tool.className = 'iceEditor-tool iceEditor-noselect'; + d.style.display = 'block'; + this.className = 'iceEditor-exec iceEditor-active'; + _z.d.body.className = 'iceEditor-code'; + var pre = _z.d.body.getElementsByTagName('pre'); + //处理pre标签 + for (var s = 0; s < pre.length; s++) pre[s].innerHTML = pre[s].innerHTML.replace(/<\/*br>/g, "\n"); + var text = _z.getHTML(); + //格式化段落 + text = text.replace(/<\/p>

/gim, "<\/p>\n

").replace(/>

\n\n<");
+									_z.d.body.innerHTML = _z.unhtml(text);
+
+								} else {
+									_z.tool.className = 'iceEditor-tool iceEditor-noselect';
+									d.style.display = 'none';
+									this.className = 'iceEditor-exec';
+									_z.d.body.className = '';
+									var text = _z.getHTML();
+									_z.d.body.innerHTML = _z.html(text);
+									var pre = _z.d.body.getElementsByTagName('pre');
+									for (var s = 0; s < pre.length; s++) pre[s].innerHTML = pre[s].innerHTML.replace(/\n/g, "
");
+								}
+								break;
+								//最大化
+							case 'max':
+								var webHeight = window.innerHeight; //页面视口高度
+								if (typeof webHeight != 'number') {
+									if (document.compatMode == 'CSS1Compat') {
+										webHeight = document.documentElement.clientHeight;
+									} else {
+										webWidth = document.body.clientWidth;
+									}
+								}
+								_z.editor.style.position = 'fixed';
+								_z.editor.style.zIndex = _z.getTime;
+								_z.editor.style.width = '100%';
+								_z.editor.style.height = '100%';
+								_z.editor.style.top = 0;
+								_z.editor.style.left = 0;
+								_z.iframe.height = webHeight - 35 - 20 + 'px';
+								this.parentNode.style.display = 'none';
+								_z.tool.getElementsByClassName('iceEditor-minWindow')[0].style.display = 'block';
+								break;
+								//最小化
+							case 'min':
+								_z.editor.removeAttribute('style');
+								_z.iframe.height = _z.height;
+								this.parentNode.style.display = 'none';
+								_z.tool.getElementsByClassName('iceEditor-maxWindow')[0].style.display = 'block';
+								break;
+								//默认执行execCommand
+							default:
+								var b = this.attr.split('|');
+								if (!_z.w.document._useStyleWithCSS) {
+									_z.w.document.execCommand('styleWithCSS', null, true);
+									_z.w.document._useStyleWithCSS = true;
+								}
+								if (b.length > 1) {
+									_z.w.document.execCommand(b[0], false, b[1]);
+								} else {
+									_z.w.document.execCommand(b[0], false, null);
+								}
+								//_z.range.getRangeAt(0).collapse(); //取消选中状态
+						}
+						return false;
+					}
+				}
+			}
+		}
+		//粘贴world
+		pasteWord(html) {
+			//是否是word过来的内容
+			function isWordContent(str) {
+				return /(class="?Mso|style="[^"]*\bmso\-|w:WordDocument|<(v|o):|lang=)/gi.test(str);
+			}
+			//转换cm/pt单位到px
+			function unitToPx(v) {
+				if (!/(pt|cm)/.test(v)) return v;
+				var unit;
+				v.replace(/([\d.]+)(\w+)/, function (str, v, u) {
+					v = v, unit = u;
+				});
+				v = unit == 'cm' ? parseFloat(v) * 25 : Math.round(parseFloat(v) * 96 / 72);
+				return v + (v ? 'px' : '');
+			}
+			//去掉小数
+			function transUnit(v) {
+				return v.replace(/[\d.]+\w+/g,
+					function (m) {
+						return unitToPx(m)
+					});
+			}
+			//处理word格式
+			function filterPasteWord(str) {
+				return str
+					.replace(//gi, "")
+					.replace(//gi, "")
+					.replace(//gi, '')
+					.replace(/.*?<\/head>/gi, '')
+					.replace(/<\/body>/gi, '')
+					.replace(/<\/html>/gi, '')
+					.replace(/[\t\s]+/gi, ' ')
+					.replace(/.*?<\/xml>/gi, '')
+					.replace(/.*?<\/o:p>/gi, '')
+					.replace(/]*>\s*<\/span>/gi, '')
+					.replace(/<(span|font|p|b|i|u|s)[^>]*>\s*<\/\1>/gi, '')
+					.replace(/v:\w+=(["']?)[^'"]+\1/g, '')
+					.replace(/]*class="?MsoHeading"?[^>]*>(.*?)<\/p>/gi, "
$1
")
+					//去掉多余的属性
+					.replace(/\s+(class|lang|align)\s*=\s*(['"]?)([\w-]+)\2/gi, function (str, name, marks, val) {
+						//保留list的标示
+						return name == "class" && val == "MsoListParagraph" ? str : '';
+					})
+					//清除多余的font/span不能匹配 有可能是空格
+					.replace(/<(font|span)[^>]*>(\s*)<\/\1>/gi, function (a, b, c) {
+						return c.replace(/[\t\r\n ]+/g, ' ');
+					})
+					//处理style的问题
+					.replace(/(<[a-z][^>]*)\sstyle=(["'])([^\2]*?)\2/gi, function (str, tag, tmp, style) {
+						var n = [],
+							s = style.replace(/^\s+|\s+$/, "").replace(/'/g, "'").replace(/"/gi, "'").replace(/[\d.]+(cm|pt)/g, function (str) {
+								return unitToPx(str);
+							}).split(/;\s*/g);
+						for (var i = 0, v; v = s[i]; i++) {
+							var name, value, parts = v.split(":");
+							if (parts.length == 2) {
+								name = parts[0].toLowerCase().trim(), value = parts[1].toLowerCase().trim();
+								if ((/^(background)\w*/.test(name) && value.replace(/(initial|\s)/g, "").length == 0) || (/^(margin)\w*/.test(name) && /^0\w+$/.test(value))) continue;
+								switch (name) {
+									case "mso-vertical-align-alt":
+										if (!//g, "")
+				.replace(//g, "")
+				.replace(//g, '')
+				.replace(/.*?<\/head>/g, '')
+				.replace(/<\/body>/g, '')
+				.replace(/<\/html>/g, '')
+				.replace(/\s+(id|class|lang|align|data|data-\w*)\s*=\s*(['"]?).*?\2/gi, '');
+
+			//过滤被禁止的html标签
+			for (var i = 0; i < this.filterTag.length; i++) {
+				html = html.replace(new RegExp("<" + this.filterTag[i] + "[^>]*>.*?<\/" + this.filterTag[i] + ">", "gim"), '');
+			}
+
+			//过滤style属性
+			var _z = this;
+			html = html.replace(/\s+style\s*=\s*(['"]?)(.*?)\1/g, function (a, q, b) {
+				if (b) {
+					b = b.replace(/('|")/gi, "'"); //防止属性中的单双引号被转义，注意转义以后的分号，因为需要通过分号来分割样式
+					var info = b.split(';');
+					if (info.length) {
+						var h = [];
+						for (var i = 0; i < info.length; i++) {
+							var styleName = info[i].trim();
+							if (styleName) {
+								var name = styleName.split(':')[0];
+								if (!_z.filterStyle.includes(name)) {
+									//用来将rgb颜色转为十六进制，rgba不变
+									var color = styleName.split(':');
+									if (color.length > 1 && /rgb\s*\(/gi.test(color[1])) {
+										color[1] = color[1].replace(/rgb\s*\(.*?\)/gi, function (a) {
+											a = a.split(/\D+/);
+											return "#" + ((1 << 24) + (parseInt(a[1]) << 16) + (parseInt(a[2]) << 8) + parseInt(a[3])).toString(16).slice(1);
+										});
+										h.push(name + ':' + color[1]);
+									} else {
+										h.push(styleName);
+									}
+								}
+							}
+						}
+						return ' style="' + h.join(';') + '"';
+					}
+				}
+				return '';
+			});
+
+			//div转p
+			return html.replace(/]*)>/g, "").replace(/<\/div>/g, "
");
+		}
+		//美化HTML格式
+		formatHTML(html) {
+			html = html.replace(/[\t\s]+/g, ' ')
+
+				//清除空标签
+				.replace(/<(span|font|p|b|i|u|s)[^>]*>(<(?!img)[^>]*>)*<\/\1>/gi, '')
+
+				//清除标签内末尾的空格，起到美化作用
+				.replace(/<(.+)\s+>/g, '<$1>')
+
+				//格式美化
+				//.replace(/>\s*
\n){1,}/gi, '
');
+
+			//格式化块级元素段落
+			for (var i = 0; i < this.blockTag.length; i++) {
+				html = html.replace(new RegExp("<\/" + this.blockTag[i] + ">", "gim"), "<\/" + this.blockTag[i] + ">\r\n");
+			}
+			return html.replace(/\r\n{1,}/gim, "\r\n").trim();
+		}
+
+		//纯文本粘贴
+		paste() {
+			// 干掉IE http之类地址自动加链接
+			try {
+				this.w.document.execCommand("AutoUrlDetect", false, false);
+			} catch (e) {}
+			var _z = this;
+			var _w = this.w;
+
+			//上传
+			var upload = function (imgBase64) {
+				//如果禁用上传到服务器，则直接以base64格式显示图像
+				if (!_z.screenshotUpload) {
+					var p = _z.c('p');
+					var a = _z.c('img');
+					a.src = imgBase64;
+					p.appendChild(a);
+					_z.setHTML(p, true);
+					return;
+				}
+
+				function dataURItoBlob(base64Data) {
+					var byteString;
+					if (base64Data.split(',')[0].indexOf('base64') >= 0) {
+						byteString = atob(base64Data.split(',')[1]);
+					} else {
+						byteString = unescape(base64Data.split(',')[1]);
+					}
+					var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
+					var a = new Uint8Array(byteString.length);
+					for (var i = 0; i < byteString.length; i++) {
+						a[i] = byteString.charCodeAt(i);
+					}
+					return new Blob([a], {
+						type: mimeString
+					});
+				}
+				var blob = dataURItoBlob(imgBase64);
+				var formData = new FormData();
+				formData.append(_z.imgUpload.name, blob);
+				formData = _z.imgUpload.formData(formData);
+				_z.ajax({
+					url: _z.uploadUrl,
+					data: formData,
+					success: function (res) {
+						if (res) {
+							for (var f = 0; f < res.length; f++) {
+								var obj = res[f];
+								if (obj.error) {
+									_z.imgUpload.error(obj, res);
+									_z.imgUpload.complete(obj, res);
+									alert(obj.error);
+								} else {
+									obj = _z.imgUpload.success(obj, res);
+									var p = _z.c('p');
+									var a = _z.c('img');
+									a.src = obj.url;
+									p.appendChild(a);
+									_z.setHTML(p, true);
+									_z.imgUpload.success(obj, res);
+									_z.imgUpload.complete(obj, res);
+								}
+							}
+						} else {
+							_z.imgUpload.error(res);
+							_z.imgUpload.complete(res);
+						}
+					},
+					error: function (xhr) {
+						_z.imgUpload.error(xhr);
+						_z.imgUpload.complete(xhr);
+					}
+				})
+			};
+			var getBase64 = function () {
+				setTimeout(function () {
+					//保证图片先插入到div里，然后去获取值
+					var imgList = _z.d.body.getElementsByTagName('img');
+					for (var i = 0; i < imgList.length; i++) {
+						if (imgList[i].src.substr(0, 5) == 'data:') {
+							upload(imgList[i].src);
+							imgList[i].parentNode.removeChild(imgList[i]);
+							break;
+						}
+					}
+				}, 10);
+			};
+
+			this.d.body.addEventListener('paste', function (e) {
+
+				// console.log(_z.range.getRangeAt(0).endContainer);
+				// console.log(_z.range.getRangeAt(0).startOffset);
+				if (!_z.isIE()) e.preventDefault();
+				var clip = (window.clipboardData || e.clipboardData || e.originalEvent.clipboardData);
+				//获取粘贴板数据
+				var text = clip.getData('Text');
+				var str = _z.pasteText && text.length ? text : (clip.getData('text/html').length ? clip.getData('text/html') : text);
+				var htmlContent = clip.getData('text/html') ? true : false;
+				//富文本粘贴模式开启状态下
+				if (htmlContent && !_z.pasteText) {
+					//复制过来的数据有些情况会被转义，需要再次转义回来，单双引号全部转为单引号比较可靠
+					str = str.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ").replace(/'/g, "'").replace(/"/g, "'");
+				}
+
+				//截图粘贴功能 判断是否开启，判断是否在pre标签中
+				if (_z.screenshot && !_z.inNodeParent(_z.range.getRangeAt(0).endContainer, 'pre')) {
+					if (clip) {
+						//ie11没有items
+						var blob = clip.items ? (clip.items[0].type.indexOf("image") !== -1 ? clip.items[0].getAsFile() : 0) : 0;
+						if (blob) {
+							var reader = new FileReader();
+							reader.onload = function (e) {
+								//图片的Base64编码字符串
+								var base64_str = e.target.result;
+								upload(base64_str);
+							}
+							reader.readAsDataURL(blob);
+						}
+					}
+					getBase64();
+				}
+				if (!str.length) return;
+				//源码模式下直接纯文本粘贴
+				if (_z.code) {
+					_z.setText(text);
+					return;
+				}
+
+				var t = str.replace(/[\r|\n]+/g, "\n").split("\n");
+				//判断光标是否在pre标签中
+				if (_z.inNodeParent(_z.range.getRangeAt(0).endContainer, 'pre')) {
+					var t = text.replace(/[\r|\n]+/g, "\n").split("\n");
+					for (var i = 0; i < t.length; i++) {
+						t[i] = _z.toText(t[i]);
+					}
+					_z.setText(t.join('
'), true);
+					return;
+				}
+
+				if (_z.pasteText && t.length == 1) {
+					_z.setText(str);
+					return;
+				}
+
+				//纯文本粘贴
+				if (_z.pasteText || !htmlContent) {
+					for (var i = 0; i < t.length; i++) {
+						if (t[i]) { //有效去除空标签
+							_z.setText('
' + t[i].trim() + '
', true);
+						}
+					}
+				} else {
+					//过滤word
+					str = _z.pasteWord(str);
+					str = _z.formatHTML(str);
+					//过滤HTML
+					str = _z.pasteHTML(str);
+					//格式化HTML
+					str = _z.formatHTML(str);
+					_z.setText(str, true);
+				}
+				//处理冗余标签
+				str = _z.getHTML();
+				_z.d.body.innerHTML = str;
+				str = _z.getHTML();
+				str = str.replace(/
<\/p>/gi, '')
+					.replace(/<\/p>
/gi, '')
+					.replace(/<(span|font|p|b|i|u|s)[^>]*>(<(?!img)[^>]*>)*<\/\1>/gi, '');
+				_z.d.body.innerHTML = str;
+
+				//下载网络图片到本地
+				if (_z.imgAutoUpload) {
+					var str = _z.getHTML();
+					str.replace(//gi, function (all, b = '') {
+						//这里必须使用闭包，因为使用了异步
+						(function (a) {
+							//判断是否为本地图片
+							if (b.substr(0, 1) == '/' && b.substr(0, 2) != '//') return;
+							//如果为网络图片，过滤白名单域名
+							_z.imgDomain = _z.imgDomain && Array.isArray(_z.imgDomain) ? _z.imgDomain : [document.domain];
+							//将当前域名加入白名单
+							!_z.imgDomain.includes(document.domain) && _z.imgDomain.push(document.domain);
+							for (var i = 0; i < _z.imgDomain.length; i++) {
+								if (new RegExp("^((http|https):)*(\/)*" + _z.imgDomain[i], "i").test(a)) {
+									return;
+								}
+							}
+							_z.ajax({
+								url: _z.uploadUrl,
+								data: {
+									'iceEditor-img': a
+								},
+								success: function (res) {
+									if (res && !res.error) {
+										res = _z.imgUpload.success(res);
+										_z.imgUpload.complete(res);
+										str = str.replace(new RegExp(a, 'gi'), res.url);
+										_z.setValue(str);
+									} else {
+										_z.imgUpload.error(res, res);
+										_z.imgUpload.complete(res, res);
+									}
+								},
+								error: function (xhr) {
+									_z.imgUpload.error(xhr);
+									_z.imgUpload.complete(xhr);
+								}
+							})
+						})(b);
+					});
+				}
+
+			});
+
+			function nodePrev(el) {
+				if (!el) return false;
+				var node = el.nextSibling;
+				if (node && node.nodeType != 1) node = nodePrev(node);
+				return node;
+			}
+			this.d.body.addEventListener('keydown', function (e) {
+				var range = _z.range.getRangeAt(0);
+				if (e.keyCode == 13) {
+					//回车处理pre中的代码
+					if (_z.inNodeParent(range.endContainer, 'pre')) {
+						//这一步是真特么费劲
+						if (_z.range.anchorNode.parentNode.tagName == 'PRE') {
+							_z.element.focus();
+							//判断一下光标是否处于当前节点文字的末尾
+							var isCursorEnd = range.endContainer.length == range.startOffset;
+							//Chrome浏览器有个非常操蛋的毛病，就是如果当前节点是最后一个,输入文字后回车
+							//第一次换行不起作用，需要两次回车才能换行
+							//所以需要判断当前节点是否为最后一个节点，完全是给Chrome用的
+							var isNodeEnd = nodePrev(range.endContainer) ? false : true;
+							var br = isNodeEnd ? '

' : '
';
+							var range = _z.range.getRangeAt(0);
+							range.insertNode(range.createContextualFragment(br));
+							//接下来这一步是为了修正光标位置
+							var node = _z.range.anchorNode.nextSibling.nextSibling;
+							range.setStart(node, 0);
+							range.setEnd(node, 0);
+							range.collapse();
+						} else if (_z.parentTagName == 'PRE' || _z.range.anchorNode.tagName == 'PRE') {
+							_z.setText('
', true);
+						}
+						e.preventDefault();
+						return;
+					}
+				}
+				// 去除Crtl+b/Ctrl+i/Ctrl+u等快捷键
+				// e.metaKey for mac
+				if (e.ctrlKey || e.metaKey) {
+					switch (e.keyCode) {
+						case 13: {
+							e.preventDefault();
+							break;
+						}
+						case 66: //ctrl+B or ctrl+b
+						case 98:
+						case 73: //ctrl+I or ctrl+i
+						case 105:
+						case 85: //ctrl+U or ctrl+u
+						case 117: {
+							e.preventDefault();
+							break;
+						}
+					}
+				}
+			});
+		}
+
+		//配置格式化
+		create() {
+			//添加样式
+			if (this.cssConfig.styleSheet) {
+				this.cssConfig.styleSheet.cssText = this.css;
+			} else {
+				this.cssConfig.innerHTML = this.css;
+			}
+			this.menuFormat();
+			this.menuAction();
+			this.disableds.style.display = this.disabled ? 'block' : 'none';
+		}
+
+		//获取编辑器的HTML内容
+		getHTML() {
+			return this.content.innerHTML;
+		}
+		//获取编辑器的Text内容
+		getText() {
+			return this.content.innerText;
+		}
+		//获取编辑器的HTML内容，等同getHTML
+		getValue() {
+			return this.content.innerHTML;
+		}
+		//设置编辑器的内容
+		setValue(v) {
+			this.content.innerHTML = v;
+			this.setTextarea();
+		}
+		//追加编辑器的内容
+		addValue(v) {
+			this.content.innerHTML += v;
+			this.setTextarea();
+		}
+		//禁止输入
+		inputDisabled() {
+			this.d.body.designMode = 'off';
+			this.d.body.contentEditable = false;
+		}
+		//启动输入
+		inputEnable() {
+			this.d.body.designMode = 'on';
+			this.d.body.contentEditable = true;
+		}
+		//监听输入
+		inputCallback(fn) {
+			var _z = this;
+			_z.d.body.oninput = function () {
+				fn && fn.call(_z, _z.getHTML(), _z.getText());
+			}
+			_z.d.body.addEventListener('paste', function (e) {
+				fn && fn.call(_z, _z.getHTML(), _z.getText());
+			})
+		}
+		//加载样式
+		styleInit() {
+			//编辑器图标
+			ice.editor.css = '.iceEditor{color:#353535!important;font-family:"Microsoft YaHei";font-size:14px!important;background:#fff;position:relative;border:solid 1px #ccc}.iceEditor *{margin:0;padding:0;box-sizing:border-box}.iceEditor a{color:#606060;text-decoration:none;-webkit-tap-highlight-color:transparent}.iceEditor a:hover{color:#000}.iceEditor-line{height:20px;width:1px;background:#cecece;margin:8px 8px 0 8px;}.iceEditor-row{margin-bottom:10px;}.iceEditor-group{text-align:left;margin-bottom:10px;}.iceEditor-group label {min-width:50px!important;display:inline-block!important;text-align:right!important;font-weight:normal!important;}.iceEditor input{height:27px!important;line-height:27px!important;padding:3px!important;border:1px solid #B7B7B7!important;font-family:inherit;font-size:inherit;vertical-align:middle;outline:none;display:inline-block!important;}.iceEditor-exec{cursor:pointer}.iceEditor-icon{width:22px;height:16px;fill:currentColor;overflow:hidden;vertical-align:middle;font-size:16px}.iceEditor-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.iceEditor-menuDropdown{min-width:35px;min-height:35px;transition:all .4s ease;margin-top:60px;opacity:0;visibility:hidden;position:absolute;background:#fff;z-index:999;box-shadow:0 2px 9px 0 rgba(0,0,0,.2);border-bottom:2px solid #676767;border-top:1px solid #676767}.iceEditor-menuDropdown::before{content:"";display:block;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #676767;position:absolute;top:-8px;left:9px}.iceEditor-menuTitle{width:100%!important;text-align:center;height:30px;line-height:30px;border-top:1px solid #efefef}.iceEditor-tool{width:100%;background:#eee;border-bottom:solid 1px #ccc;position:relative}.iceEditor-tool:after,.iceEditor-tool:before{display:table;content:" "}.iceEditor-tool:after{clear:both}.iceEditor-menu{width:100%;padding:0 10px;display:inline-block;float:left}.iceEditor-menu a{list-style:none;float:left;min-width:35px;height:35px;padding:0 5px;text-align:center;line-height:35px;cursor:pointer}.iceEditor-menu a:hover{background:#cdcdcd}.iceEditor-menu>li>div.iceEditor-exec{list-style:none;float:left;min-width:35px;height:35px;padding:0 5px;text-align:center;line-height:35px;cursor:pointer}.iceEditor-menu>li>div.iceEditor-exec:hover{background:#cdcdcd}.iceEditor-menu svg{fill:currentColor;overflow:hidden;vertical-align:middle;font-size:16px}.iceEditor-menu .iceEditor-active{background:#e0e0e0;position:relative;z-index:999}.iceEditor-menu .iceEditor-actives,.iceEditor-menu .iceEditor-active-s{background:#d8d8d8;}.iceEditor-menu .iceEditor-disabledMask{background:rgba(238,238,238,0.7);width:100%;height:100%;position:absolute;left:0;top:0;display:none}.iceEditor-menu li{display:inline-block;float:left;line-height:initial;}.iceEditor-menu li .iceEditor-menuDropdown.iceEditor-menuActive{margin-top:44px;opacity:1;visibility:visible}.iceEditor-menu li.iceEditor-minWindow{display:none}.iceEditor-menu li.iceEditor-maxWindow,.iceEditor-menu li.iceEditor-minWindow{float:right}.iceEditor-menu li.iceEditor-maxWindow>div,.iceEditor-menu li.iceEditor-minWindow>div{position:relative;z-index:9}.iceEditor-menu li.iceEditor-maxWindow .iceEditor-icon,.iceEditor-menu li.iceEditor-minWindow .iceEditor-icon{color:#606060}.iceEditor-codeLanguages select{padding:5px 5px;width:120px;outline:none;font-size:15px;margin-top:10px;}.iceEditor input.iceEditor-uploadInput{display:none!important}.iceEditor-uploadBtn{float:none;width:auto;font-size:15px;background:#00b7ee;height:40px;line-height:40px;padding:0 30px;color:#fff;display:inline-block;margin:0 auto 15px auto;cursor:pointer;box-shadow:0 1px 1px rgba(0,0,0,.1)}.iceEditor-uploadBtn:hover{background:#009ccb}.iceEditor-uploadIcon{width:45px;height:45px;color:#bababa;margin:20px 20px 10px}.iceEditor-backColor{width:230px;padding:5px}.iceEditor-backColor span{width:20px;height:20px;padding:0;margin:1px;display:inline-block}.iceEditor-fontSize{width:280px}.iceEditor-fontSize li{width:40px;text-align:center}.iceEditor-fontSize span{width:40px;display:inline-block;padding:10px 0}.iceEditor-fontSize span:hover{background:#eee;color:#4CAF50}.iceEditor-createLink label{display:inline-block;}.iceEditor .iceEditor-link{width:175px!important;}.iceEditor-popup .iceEditor-insertImage{text-align:center}.iceEditor-popup .iceEditor-insertImageUrl{width:220px!important;height:27px;outline:0;margin-right:15px}.iceEditor-popup .iceEditor-inputWidth{width:50px!important;height:27px;outline:0;margin-right:15px}.iceEditor-popup .iceEditor-inputHeight{width:50px!important;height:27px;outline:0}.iceEditor-popup .iceEditor-btn{width:auto;display:inline-block;float:none;color:#fff!important;height:27px;line-height:25px;padding:0 10px;background:#939393;vertical-align:middle;margin-left:5px;border:1px solid #7b7b7b}.iceEditor-popup .iceEditor-btn:hover{background:#7b7b7b!important;color:#fff}.iceEditor-tableBox{position:relative;width:190px;height:214px;padding:5px;overflow:hidden}.iceEditor-tableBgOn{position:absolute!important;top:5px;left:5px;z-index:4;width:18px;height:18px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC) repeat}.iceEditor-tableBgOff{width:180px;height:180px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC) repeat}.iceEditor-tableNum{height:30px;line-height:30px;text-align:center;color:#757575}.iceEditor-video{text-align:left}.iceEditor-video label{margin-right:20px;display:inline-block}.iceEditor-video input{margin-right:5px}.iceEditor-video div{height:27px;margin-bottom:10px}.iceEditor-popup .iceEditor-videoUrl{width:255px!important;height:27px;outline:0;margin-right:0}.iceEditor-content{width:100%;height:100%;padding:20px;position:relative}.iceEditor-content:focus{outline:0}.iceEditor-dragBg{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;display:none;}.iceEditor-drag{color:#757575;background:#eee;text-align:center;height:12px;line-height:0;cursor:n-resize}.iceEditor-disabled{position:absolute;width:100%;height:100%;top:0;left:0;background:rgba(191,191,191,.79);z-index:99999;display:none}.iceEditor-popup{display:none}.iceEditor-popupMain{width:400px;height:200px;position:fixed;margin:auto;top:0;bottom:0;left:0;right:0;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.12);z-index:9999;animation-name:iceEditorPopup;animation-duration:.5s}.iceEditor-popupBox{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.33);opacity:.5;filter:alpha(opacity=50);z-index:1}.iceEditor-popupTitle{width:100%;height:30px;line-height:30px;background:#2f2f2f;padding:0 10px;color:#fff}.iceEditor-popupTitle span{display:inline-block;vertical-align:middle}.iceEditor-popupTitle::before{content:"";display:inline-block;width:10px;height:10px;border-radius:10px;background:#c7f98c;vertical-align:middle;margin-right:8px}.iceEditor-popupClose{float:right;padding:0 10px;color:#fff;font-size:18px;cursor:pointer}.iceEditor-popupClose:hover{color:#8fe5ff}.iceEditor-popupContent{width:100%;padding:10px;color:#000;overflow:auto;float:left}.iceEditor-popupBtn{width:100%;border:0;color:#fff;background:#03A9F4;border-top:1px solid #efefef;padding:0 20px;margin:0;height:35px;text-align:center;line-height:35px;cursor:pointer;margin-top:20px;outline:0}.iceEditor-popupBtn:hover{color:#151515;background:#efefef}@keyframes iceEditorPopup{0%{top:-100px;opacity:0}to{top:0;opacity:1}}';
+			//编辑器图标
+			ice.editor.svg = '';
+			(function svg() {
+				var c = document.createElement('style'),
+					d, s, b = document.body;
+				if (c.styleSheet) {
+					c.styleSheet.cssText = ice.editor.css;
+				} else {
+					c.innerHTML = ice.editor.css;
+				}
+				document.getElementsByTagName('head')[0].appendChild(c);
+				d = document.createElement("div");
+				d.innerHTML = ice.editor.css + ice.editor.svg;
+				ice.editor.svg = null;
+				s = d.getElementsByTagName("svg")[0];
+				if (s) {
+					s.setAttribute("aria-hidden", "true");
+					s.style.position = "absolute";
+					s.style.width = 0;
+					s.style.height = 0;
+					s.style.overflow = "hidden";
+					if (b.firstChild) {
+						b.firstChild.parentNode.insertBefore(s, b.firstChild)
+					} else {
+						b.appendChild(s)
+					}
+				}
+			})();
+		}
+	}
+	//只返回color色值属性和setColor方法
+	return new iceEditor(id,callback);
+}
\ No newline at end of file
diff --git a/module-form/src/main/resources/static/form-design/modules/iconPicker.js b/module-form/src/main/resources/static/form-design/modules/iconPicker.js
new file mode 100644
index 00000000..276e7fd3
--- /dev/null
+++ b/module-form/src/main/resources/static/form-design/modules/iconPicker.js
@@ -0,0 +1,327 @@
+
+layui.define(['laypage', 'form'], function (exports) {
+    "use strict";
+
+    var IconPicker =function () {
+        this.v = '0.1.beta';
+    }, _MOD = 'iconPicker',
+        _this = this,
+        $ = layui.jquery,
+        laypage = layui.laypage,
+        form = layui.form,
+        BODY = 'body',
+        TIPS = '请选择图标';
+
+    /**
+     * 渲染组件
+     */
+    IconPicker.prototype.render = function(options){
+        var opts = options,
+            // DOM选择器
+            elem = opts.elem,
+            // 数据类型：fontClass/unicode
+            type = opts.type == null ? 'fontClass' : opts.type,
+            // 是否分页：true/false
+            page = opts.page,
+            // 每页显示数量
+            limit = limit == null ? 12 : opts.limit,
+            // 是否开启搜索：true/false
+            search = opts.search == null ? true : opts.search,
+            // 点击回调
+            click = opts.click,
+            // json数据
+            data = {},
+            // 唯一标识
+            tmp = new Date().getTime(),
+            // 是否使用的class数据
+            isFontClass = opts.type === 'fontClass',
+            TITLE = 'layui-select-title',
+            TITLE_ID = 'layui-select-title-' + tmp,
+            ICON_BODY = 'layui-iconpicker-' + tmp,
+            PICKER_BODY = 'layui-iconpicker-body-' + tmp,
+            PAGE_ID = 'layui-iconpicker-page-' + tmp,
+            LIST_BOX = 'layui-iconpicker-list-box',
+            selected = 'layui-form-selected',
+            unselect = 'layui-unselect';
+
+        var a = {
+            init: function () {
+                data = common.getData[type]();
+
+                a.hideElem().createSelect().createBody().toggleSelect();
+                common.loadCss();
+                return a;
+            },
+            /**
+             * 隐藏elem
+             */
+            hideElem: function () {
+                $(elem).hide();
+                return a;
+            },
+            /**
+             * 绘制select下拉选择框
+             */
+            createSelect: function () {
+                var selectHtml = '
' +
+                    '
' +
+                        '
'+
+                            '' +
+                                '' +
+                            ''+
+                            '' +
+                        '
'+
+                    '
' +
+                    '
' +
+                        '123' +
+                    '
';
+                $(elem).after(selectHtml);
+                return a;
+            },
+            /**
+             * 展开/折叠下拉框
+             */
+            toggleSelect: function () {
+                var item = '#' + TITLE_ID + ' .layui-iconpicker-item,#' + TITLE_ID + ' .layui-iconpicker-item .layui-edge';
+                a.event('click', item, function (e) {
+                    console.log('xxxx');
+                    var $icon = $('#' + ICON_BODY);
+                    if ($icon.hasClass(selected)) {
+                        $icon.removeClass(selected).addClass(unselect);
+                    } else {
+                        $icon.addClass(selected).removeClass(unselect);
+                    }
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            /**
+             * 绘制主体部分
+             */
+            createBody: function () {
+                // 获取数据
+                var searchHtml = '';
+
+                if (search) {
+                    searchHtml = '
' +
+                        '' +
+                        '' +
+                        '
';
+                }
+
+                // 组合dom
+                var bodyHtml = '
' +
+                    searchHtml +
+                        '
 '+
+                     '
';
+                $('#' + ICON_BODY).find('.layui-anim').eq(0).html(bodyHtml);
+                a.search().createList().check().page();
+
+                return a;
+            },
+            /**
+             * 绘制图标列表
+             * @param text 模糊查询关键字
+             * @returns {string}
+             */
+            createList: function (text) {
+                var d = data,
+                    l = d.length,
+                    pageHtml = '',
+                    listHtml = $('
')//'
';
+
+                // 计算分页数据
+                var _limit = limit, // 每页显示数量
+                    _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1), // 总计多少页
+                    _id = PAGE_ID;
+
+                // 图标列表
+                var icons = [];
+
+                for (var i = 0; i < l; i++) {
+                    var obj = d[i];
+
+                    // 判断是否模糊查询
+                    if (text && obj.indexOf(text) === -1) {
+                        continue;
+                    }
+
+                    // 每个图标dom
+                    var icon = '
';
+                    if (isFontClass){
+                        icon += '';
+                    } else {
+                        icon += ''+ obj.replace('amp;', '') +'';
+                    }
+                    icon += '
';
+
+                    icons.push(icon);
+                }
+
+                // 查询出图标后再分页
+                l = icons.length;
+                _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1);
+                for (var i = 0; i < _pages; i++) {
+                    // 按limit分块
+                    var lm = $('
');
+
+                    for (var j = i * _limit; j < (i+1) * _limit && j < l; j++) {
+                        lm.append(icons[j]);
+                    }
+
+                    listHtml.append(lm);
+                }
+
+                // 无数据
+                if (l === 0) {
+                    listHtml.append('
无数据
');
+                }
+
+                // 判断是否分页
+                if (page){
+                    $('#' + PICKER_BODY).addClass('layui-iconpicker-body-page');
+                    pageHtml = '
' +
+                        '
' +
+                        '1/' +
+                        ''+ _pages +'' +
+                        ' ('+ l +')' +
+                        '
' +
+                        '
' +
+                        ' ' +
+                        ' ' +
+                        '
' +
+                        '
';
+                }
+
+
+                $('#' + ICON_BODY).find('.layui-anim').find('.' + LIST_BOX).html('').append(listHtml).append(pageHtml);
+                return a;
+            },
+            // 分页
+            page: function () {
+                var icon = '#' + PAGE_ID + ' .layui-iconpicker-page-operate .layui-icon';
+
+                $(icon).unbind('click');
+                a.event('click', icon, function (e) {
+                   var elem = e.currentTarget,
+                       total = parseInt($('#' +PAGE_ID + '-pages').html()),
+                       isPrev = $(elem).attr('prev') !== undefined,
+                       // 按钮上标的页码
+                       index = parseInt($(elem).attr('data-index')),
+                       $cur = $('#' +PAGE_ID + '-current'),
+                       // 点击时正在显示的页码
+                       current = parseInt($cur.html());
+
+                    // 分页数据
+                    if (isPrev && current > 1) {
+                        current=current-1;
+                        $(icon + '[prev]').attr('data-index', current);
+                    } else if (!isPrev && current < total){
+                        current=current+1;
+                        $(icon + '[next]').attr('data-index', current);
+                    }
+                    $cur.html(current);
+
+                    // 图标数据
+                    $('.layui-iconpicker-icon-limit').hide();
+                    $('#layui-iconpicker-icon-limit-' + current).show();
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            /**
+             * 搜索
+             */
+            search: function () {
+                var item = '#' + PICKER_BODY + ' .layui-iconpicker-search .layui-input';
+                a.event('input propertychange', item, function (e) {
+                    var elem = e.target,
+                        t = $(elem).val();
+                    a.createList(t);
+                });
+                a.event('click', item, function (e) {
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            /**
+             * 点击选中图标
+             */
+            check: function () {
+                var item = '#' + PICKER_BODY + ' .layui-iconpicker-icon-item';
+                a.event('click', item, function (e) {
+                    var el = $(e.currentTarget).find('.layui-icon'),
+                        icon = '';
+                    if (isFontClass) {
+                        var clsArr = el.attr('class').split(/[\s\n]/),
+                            cls = clsArr[1],
+                            icon = cls;
+                        $('#' + TITLE_ID).find('.layui-iconpicker-item .layui-icon').html('').attr('class', clsArr.join(' '));
+                    } else {
+                        var cls = el.html(),
+                            icon = cls;
+                        $('#' + TITLE_ID).find('.layui-iconpicker-item .layui-icon').html(icon);
+                    }
+
+                    $('#' + ICON_BODY).removeClass(selected).addClass(unselect);
+                    $(elem).attr('value', icon);
+                    // 回调
+                    if (click) {
+                        click({
+                            icon: icon
+                        });
+                    }
+
+                });
+                return a;
+            },
+            event: function (evt, el, fn) {
+                $(BODY).on(evt, el, fn);
+            }
+        };
+
+        var common = {
+            /**
+             * 加载样式表
+             */
+            loadCss: function () {
+                var css = '.layui-iconpicker {max-width: 280px;}.layui-iconpicker .layui-anim{display:none;position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;}.layui-iconpicker-item{border:1px solid #e6e6e6;width:90px;height:38px;border-radius:4px;cursor:pointer;position:relative;}.layui-iconpicker-icon{border-right:1px solid #e6e6e6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:60px;height:100%;float:left;text-align:center;background:#fff;transition:all .3s;}.layui-iconpicker-icon i{line-height:38px;font-size:18px;}.layui-iconpicker-item > .layui-edge{left:70px;}.layui-iconpicker-item:hover{border-color:#D2D2D2!important;}.layui-iconpicker-item:hover .layui-iconpicker-icon{border-color:#D2D2D2!important;}.layui-iconpicker.layui-form-selected .layui-anim{display:block;}.layui-iconpicker-body{padding:6px;}.layui-iconpicker .layui-iconpicker-list{background-color:#fff;border:1px solid #ccc;border-radius:4px;}.layui-iconpicker .layui-iconpicker-icon-item{display:inline-block;width:21.1%;line-height:36px;text-align:center;cursor:pointer;vertical-align:top;height:36px;margin:4px;border:1px solid #ddd;border-radius:2px;transition:300ms;}.layui-iconpicker .layui-iconpicker-icon-item i.layui-icon{font-size:17px;}.layui-iconpicker .layui-iconpicker-icon-item:hover{background-color:#eee;border-color:#ccc;-webkit-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;-moz-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;box-shadow:0 0 2px #aaa,0 0 2px #fff inset;text-shadow:0 0 1px #fff;}.layui-iconpicker-search{position:relative;margin:0 0 6px 0;border:1px solid #e6e6e6;border-radius:2px;transition:300ms;}.layui-iconpicker-search:hover{border-color:#D2D2D2!important;}.layui-iconpicker-search .layui-input{cursor:text;display:inline-block;width:86%;border:none;padding-right:0;margin-top:1px;}.layui-iconpicker-search .layui-icon{position:absolute;top:11px;right:4%;}.layui-iconpicker-tips{text-align:center;padding:8px 0;cursor:not-allowed;}.layui-iconpicker-page{margin-top:6px;margin-bottom:-6px;font-size:12px;padding:0 2px;}.layui-iconpicker-page-count{display:inline-block;}.layui-iconpicker-page-operate{display:inline-block;float:right;cursor:default;}.layui-iconpicker-page-operate .layui-icon{font-size:12px;cursor:pointer;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit{display:none;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit:first-child{display:block;}';
+                $('head').append('');
+            },
+            /**
+             * 获取数据
+             */
+            getData: {
+                fontClass: function () {
+                    var arr = ["layui-icon-rate-half","layui-icon-rate","layui-icon-rate-solid","layui-icon-cellphone","layui-icon-vercode","layui-icon-login-wechat","layui-icon-login-qq","layui-icon-login-weibo","layui-icon-password","layui-icon-username","layui-icon-refresh-3","layui-icon-auz","layui-icon-spread-left","layui-icon-shrink-right","layui-icon-snowflake","layui-icon-tips","layui-icon-note","layui-icon-home","layui-icon-senior","layui-icon-refresh","layui-icon-refresh-1","layui-icon-flag","layui-icon-theme","layui-icon-notice","layui-icon-website","layui-icon-console","layui-icon-face-surprised","layui-icon-set","layui-icon-template-1","layui-icon-app","layui-icon-template","layui-icon-praise","layui-icon-tread","layui-icon-male","layui-icon-female","layui-icon-camera","layui-icon-camera-fill","layui-icon-more","layui-icon-more-vertical","layui-icon-rmb","layui-icon-dollar","layui-icon-diamond","layui-icon-fire","layui-icon-return","layui-icon-location","layui-icon-read","layui-icon-survey","layui-icon-face-smile","layui-icon-face-cry","layui-icon-cart-simple","layui-icon-cart","layui-icon-next","layui-icon-prev","layui-icon-upload-drag","layui-icon-upload","layui-icon-download-circle","layui-icon-component","layui-icon-file-b","layui-icon-user","layui-icon-find-fill","layui-icon-loading","layui-icon-loading-1","layui-icon-add-1","layui-icon-play","layui-icon-pause","layui-icon-headset","layui-icon-video","layui-icon-voice","layui-icon-speaker","layui-icon-fonts-del","layui-icon-fonts-code","layui-icon-fonts-html","layui-icon-fonts-strong","layui-icon-unlink","layui-icon-picture","layui-icon-link","layui-icon-face-smile-b","layui-icon-align-left","layui-icon-align-right","layui-icon-align-center","layui-icon-fonts-u","layui-icon-fonts-i","layui-icon-tabs","layui-icon-radio","layui-icon-circle","layui-icon-edit","layui-icon-share","layui-icon-delete","layui-icon-form","layui-icon-cellphone-fine","layui-icon-dialogue","layui-icon-fonts-clear","layui-icon-layer","layui-icon-date","layui-icon-water","layui-icon-code-circle","layui-icon-carousel","layui-icon-prev-circle","layui-icon-layouts","layui-icon-util","layui-icon-templeate-1","layui-icon-upload-circle","layui-icon-tree","layui-icon-table","layui-icon-chart","layui-icon-chart-screen","layui-icon-engine","layui-icon-triangle-d","layui-icon-triangle-r","layui-icon-file","layui-icon-set-sm","layui-icon-add-circle","layui-icon-404","layui-icon-about","layui-icon-up","layui-icon-down","layui-icon-left","layui-icon-right","layui-icon-circle-dot","layui-icon-search","layui-icon-set-fill","layui-icon-group","layui-icon-friends","layui-icon-reply-fill","layui-icon-menu-fill","layui-icon-log","layui-icon-picture-fine","layui-icon-face-smile-fine","layui-icon-list","layui-icon-release","layui-icon-ok","layui-icon-help","layui-icon-chat","layui-icon-top","layui-icon-star","layui-icon-star-fill","layui-icon-close-fill","layui-icon-close","layui-icon-ok-circle","layui-icon-add-circle-fine"];
+                    return arr;
+                },
+                unicode: function () {
+                    return ["&#xe6c9;","&#xe67b;","&#xe67a;","&#xe678;","&#xe679;","&#xe677;","&#xe676;","&#xe675;","&#xe673;","&#xe66f;","&#xe9aa;","&#xe672;","&#xe66b;","&#xe668;","&#xe6b1;","&#xe702;","&#xe66e;","&#xe68e;","&#xe674;","&#xe669;","&#xe666;","&#xe66c;","&#xe66a;","&#xe667;","&#xe7ae;","&#xe665;","&#xe664;","&#xe716;","&#xe656;","&#xe653;","&#xe663;","&#xe6c6;","&#xe6c5;","&#xe662;","&#xe661;","&#xe660;","&#xe65d;","&#xe65f;","&#xe671;","&#xe65e;","&#xe659;","&#xe735;","&#xe756;","&#xe65c;","&#xe715;","&#xe705;","&#xe6b2;","&#xe6af;","&#xe69c;","&#xe698;","&#xe657;","&#xe65b;","&#xe65a;","&#xe681;","&#xe67c;","&#xe601;","&#xe857;","&#xe655;","&#xe770;","&#xe670;","&#xe63d;","&#xe63e;","&#xe654;","&#xe652;","&#xe651;","&#xe6fc;","&#xe6ed;","&#xe688;","&#xe645;","&#xe64f;","&#xe64e;","&#xe64b;","&#xe62b;","&#xe64d;","&#xe64a;","&#xe64c;","&#xe650;","&#xe649;","&#xe648;","&#xe647;","&#xe646;","&#xe644;","&#xe62a;","&#xe643;","&#xe63f;","&#xe642;","&#xe641;","&#xe640;","&#xe63c;","&#xe63b;","&#xe63a;","&#xe639;","&#xe638;","&#xe637;","&#xe636;","&#xe635;","&#xe634;","&#xe633;","&#xe632;","&#xe631;","&#xe630;","&#xe62f;","&#xe62e;","&#xe62d;","&#xe62c;","&#xe629;","&#xe628;","&#xe625;","&#xe623;","&#xe621;","&#xe620;","&#xe61f;","&#xe61c;","&#xe60b;","&#xe619;","&#xe61a;","&#xe603;","&#xe602;","&#xe617;","&#xe615;","&#xe614;","&#xe613;","&#xe612;","&#xe611;","&#xe60f;","&#xe60e;","&#xe60d;","&#xe60c;","&#xe60a;","&#xe609;","&#xe605;","&#xe607;","&#xe606;","&#xe604;","&#xe600;","&#xe658;","&#x1007;","&#x1006;","&#x1005;","&#xe608;"];
+                }
+            }
+        };
+
+        a.init();
+        return new IconPicker();
+    };
+
+    /**
+     * 选中图标
+     * @param filter lay-filter
+     * @param iconName 图标名称，自动识别fontClass/unicode
+     */
+    IconPicker.prototype.checkIcon = function (filter, iconName){
+        var p = $('*[lay-filter='+ filter +']').next().find('.layui-iconpicker-item .layui-icon'),
+            c = iconName;
+
+        if (c.indexOf('#xe') > 0){
+            p.html(c);
+        } else {
+            p.html('').attr('class', 'layui-icon ' + c);
+        }
+    };
+
+    var iconPicker = new IconPicker();
+    exports(_MOD, iconPicker);
+});
\ No newline at end of file
diff --git a/module-form/src/main/resources/static/form-design/modules/labelGeneration.css b/module-form/src/main/resources/static/form-design/modules/labelGeneration.css
new file mode 100644
index 00000000..93d4707c
--- /dev/null
+++ b/module-form/src/main/resources/static/form-design/modules/labelGeneration.css
@@ -0,0 +1,4 @@
+.none-transition{
+    transition: none;
+    -webkit-transition: none;
+}
diff --git a/module-form/src/main/resources/static/form-design/modules/labelGeneration.js b/module-form/src/main/resources/static/form-design/modules/labelGeneration.js
new file mode 100644
index 00000000..849e8cfb
--- /dev/null
+++ b/module-form/src/main/resources/static/form-design/modules/labelGeneration.js
@@ -0,0 +1,256 @@
+layui.define(['form'], function(exports) {
+    var form = layui.form,
+        $ = layui.jquery,
+        layer = layui.layer,
+        index = 0,
+        oldId,
+        MOD_NAME = 'labelGeneration',
+        formField = {
+            label: {
+                id: '-1',
+                tag: "label",
+            },
+        },
+        labelGeneration = {
+            set: function(options) {
+                var that = this;
+                that.config = $.extend({}, that.config, options);
+                return that;
+            }
+            //事件监听
+            ,
+            on: function(events, callback) {
+                return layui.onevent.call(this, MOD_NAME, events, callback);
+            }
+        },
+        Class = function(options) {
+            var that = this;
+            that.config = $.extend({}, that.config, labelGeneration.config, options);
+            that.render();
+        },
+        thisIns = function() {
+            var that = this,
+                options = that.config;
+            return {
+                reload: function(options) {
+                    that.reload.call(that, options);
+                },
+                getOptions: function() {
+                    return options || null;
+                },
+                getData: function() {
+                    return options.data || null;
+                }
+            }
+        }
+    Class.prototype.config = {
+        version: "1.0.0",
+        Author: "谁家没一个小强",
+        generateId: 0,
+        data: [],
+        isEnter: false
+    };
+    /* 自动生成ID 当前页面自动排序*/
+    Class.prototype.autoId = function(tag) {
+        var that = this,
+            options = that.config;
+        options.generateId = options.generateId + 1;
+        return tag + '_' + options.generateId;
+    }
+    Class.prototype.components = {
+        label: {
+            render: function(json, options) {
+                var _html = '
';
+                _html += '
';
+                _html += '';
+                _html += '
';
+                if (options.isEnter) {
+                    _html += ''.format(json.id);
+                } else {
+                    _html += ''.format(json.id);
+                }
+                _html += '
';
+                if (!options.isEnter) {
+                    _html += ''.format(json.id);
+                }
+                _html += '';
+                _html += '
';
+                _html += '';
+                _html += '
';
+                _html += '
';
+                _html += '
'.format(json.id);
+                _html += '
';
+                return _html;
+            },
+            update: function(json) {},
+            /* 获取对象 */
+            jsonData: function(id, that) {
+                //分配一个新的ID
+                var _json = JSON.parse(JSON.stringify(formField.label));
+                _json.id = id == undefined ? that.autoId(_json.tag) : id;
+                that.checkId(_json, that);
+                return _json;
+            }
+        }
+    };
+    /* 判定id是否重复*/
+    Class.prototype.checkId = function(json, that) {
+        if ($("#" + json.id + "-content").length != 0) {
+            json.id = that.autoId(json.tag);
+            that.checkId(json);
+        } else {
+            return;
+        }
+    }
+    Class.prototype.bindGridSortEvent = function(json) {
+        var that = this,
+            options = that.config;
+        var formItemSort = Sortable.create(document.getElementById(json.id + "-content"), {
+            group: {
+                name: 'group' + json.id
+            },
+            animation: 1000,
+            onEnd: function(evt) {
+                var _values = $("#" + json.id + "-content").find("div");
+                var ops = [];
+                for (var i = 0; i < _values.length; i++) {
+                    ops.push({
+                        "ngColor": $(_values[i]).attr("ng-color"),
+                        "value": $(_values[i]).text()
+                    });
+                }
+                options.data = ops;
+            }
+        });
+    }
+    /* 绑定事件*/
+    Class.prototype.deleteValue = function(value, ngValue) {
+        var that = this,
+            options = that.config;
+        for (var i = 0; i < options.data.length; i++) {
+            if (options.data[i].value === value && options.data[i].ngColor === ngValue) {
+                options.data.splice(i, 1);
+                break;
+            }
+        }
+    }
+    /* 绑定事件*/
+    Class.prototype.bindPropertyEvent = function(_json) {
+        var that = this,
+            options = that.config;
+        var colorClass = "";
+        if (options.isEnter) {
+            $("#" + _json.id).keypress(function(event) {
+                if (event.which === 13) {
+                    var _value = $(this).val();
+                    if (_value === "") {
+                        layer.msg('标签值不能为空');
+                        return;
+                    }
+                    index = index + 1;
+                    var _html = '
{1}
'.format(colorClass, _value, _json.id + index, index);
+                    $("#" + _json.id + "-content").append(_html);
+                    options.data.push({
+                        "ngColor": colorClass,
+                        "value": _value
+                    });
+                    $("#" + _json.id + index + " .layui-icon-close").click(function() {
+                        that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
+                        $(this).parent().remove();
+                    });
+                    return false;
+                }
+            });
+        } else {
+            $("#" + _json.id + "-button").click(function(event) {
+                var _value = $("#" + _json.id).val();
+                if (_value === "") {
+                    layer.msg('标签值不能为空');
+                    return;
+                }
+                index = index + 1;
+                var _html = '
{1}
'.format(colorClass, _value, _json.id + index, index);
+                $("#" + _json.id + "-content").append(_html);
+                options.data.push({
+                    "ngColor": colorClass,
+                    "value": _value
+                });
+                $("#" + _json.id + index + " .layui-icon-close").click(function() {
+                    that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
+                    $(this).parent().remove();
+                });
+            });
+        }
+        form.on('select(' + _json.id + '-switchTest)', function(data) {
+            colorClass = data.value;
+        });
+        for (var i = 0; i < options.data.length; i++) {
+            index = index + 1;
+            var _html = '
{1}
'.format(options.data[i].ngColor, options.data[i].value, _json.id + index, index);
+            $("#" + _json.id + "-content").append(_html);
+            $("#" + _json.id + index + " .layui-icon-close").click(function() {
+                that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
+                $(this).parent().remove();
+            });
+        }
+    }
+    /* 渲染组件 */
+    Class.prototype.renderComponents = function() {
+        var that = this,
+            options = that.config;
+        var elem = $(options.elem);
+        elem.empty();
+        var jsonData = that.components['label'].jsonData(undefined, that);
+        elem.append(that.components['label'].render(jsonData, options));
+        that.bindPropertyEvent(jsonData);
+        that.bindGridSortEvent(jsonData);
+        form.render();
+    }
+    Class.prototype.reload = function(options) {
+        var that = this;
+        options = options || {}; //如果是空的话，就赋值 {}
+        that.config = $.extend({}, that.config, labelGeneration.config, options);
+        that.render(options);
+    }
+    //核心入口 初始化一个 regionSelect 类
+    labelGeneration.render = function(options) {
+        var ins = new Class(options);
+        return thisIns.call(ins);
+    }
+    /**
+     * 渲染组件
+     */
+    Class.prototype.render = function(options) {
+        var that = this,
+            options = that.config;
+        that.renderComponents();
+    }
+    String.prototype.format = function(args) {
+        var result = this;
+        if (arguments.length > 0) {
+            if (arguments.length == 1 && typeof(args) == "object") {
+                for (var key in args) {
+                    if (args[key] != undefined) {
+                        var reg = new RegExp("({" + key + "})", "g");
+                        result = result.replace(reg, args[key]);
+                    }
+                }
+            } else {
+                for (var i = 0; i < arguments.length; i++) {
+                    if (arguments[i] != undefined) {
+                        var reg = new RegExp("({[" + i + "]})", "g");
+                        result = result.replace(reg, arguments[i]);
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    exports(MOD_NAME, labelGeneration);
+});
\ No newline at end of file
diff --git a/module-form/src/main/resources/static/form-design/modules/xmSelect.js b/module-form/src/main/resources/static/form-design/modules/xmSelect.js
new file mode 100644
index 00000000..2f104685
--- /dev/null
+++ b/module-form/src/main/resources/static/form-design/modules/xmSelect.js
@@ -0,0 +1,8 @@
+/*!
+ * @Title: xm-select
+ * @Version: 1.1.8
+ * @Description：基于layui的多选解决方案
+ * @Site: https://gitee.com/maplemei/xm-select
+ * @Author: maplemei
+ * @License：Apache License 2.0
+ */!function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="./",n(n.s=213)}({104:function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var n=t.protocol+"//"+t.host,o=n+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,(function(e,t){var r,i=t.trim().replace(/^"(.*)"$/,(function(e,t){return t})).replace(/^'(.*)'$/,(function(e,t){return t}));return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?e:(r=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:o+i.replace(/^\.\//,""),"url("+JSON.stringify(r)+")")}))}},213:function(e,t,n){"use strict";n.r(t),function(e){n(215),n(216),n(218);var t=n(65);window.addEventListener("click",(function(){Object.keys(t.b).forEach((function(e){var n=t.b[e];n&&n.closed&&n.closed()}))})),"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?e.exports=t.c:"function"==typeof define&&n(220)?define(xmSelect):window.layui&&layui.define&&layui.define((function(e){e("xmSelect",t.c)})),window.xmSelect=t.c}.call(this,n(214)(e))},214:function(e,t){e.exports=function(e){if(!e.webpackPolyfill){var t=Object.create(e);t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),Object.defineProperty(t,"exports",{enumerable:!0}),t.webpackPolyfill=1}return t}},215:function(e,t){Array.prototype.map||(Array.prototype.map=function(e,t){var n,o,r,i=Object(this),l=i.length>>>0;for(t&&(n=t),o=new Array(l),r=0;r>>0;if("function"!=typeof e)throw new TypeError(e+" is not a function");for(arguments.length>1&&(n=t),o=0;o>>0;if("function"!=typeof e)throw new TypeError;for(var o=[],r=arguments[1],i=0;i>>0,r=arguments[1],i=0;i .xm-tips {\n  color: #999999;\n  padding: 0 10px;\n  position: absolute;\n  display: flex;\n  height: 100%;\n  align-items: center;\n}\nxm-select > .xm-icon {\n  display: inline-block;\n  overflow: hidden;\n  position: absolute;\n  width: 0;\n  height: 0;\n  right: 10px;\n  top: 50%;\n  margin-top: -3px;\n  cursor: pointer;\n  border: 6px dashed transparent;\n  border-top-color: #C2C2C2;\n  border-top-style: solid;\n  transition: all 0.3s;\n  -webkit-transition: all 0.3s;\n}\nxm-select > .xm-icon-expand {\n  margin-top: -9px;\n  transform: rotate(180deg);\n}\nxm-select > .xm-label.single-row {\n  position: absolute;\n  top: 0;\n  bottom: 0px;\n  left: 0px;\n  right: 30px;\n  overflow: auto hidden;\n}\nxm-select > .xm-label.single-row .scroll {\n  overflow-y: hidden;\n}\nxm-select > .xm-label.single-row .label-content {\n  flex-wrap: nowrap;\n}\nxm-select > .xm-label.auto-row .label-content {\n  flex-wrap: wrap;\n}\nxm-select > .xm-label.auto-row .xm-label-block > span {\n  white-space: unset;\n  height: 100%;\n}\nxm-select > .xm-label .scroll .label-content {\n  display: flex;\n  padding: 3px 30px 3px 10px;\n}\nxm-select > .xm-label .xm-label-block {\n  display: flex;\n  position: relative;\n  padding: 0px 5px;\n  margin: 2px 5px 2px 0;\n  border-radius: 3px;\n  align-items: baseline;\n  color: #FFF;\n}\nxm-select > .xm-label .xm-label-block > span {\n  display: flex;\n  color: #FFF;\n  white-space: nowrap;\n}\nxm-select > .xm-label .xm-label-block > i {\n  color: #FFF;\n  margin-left: 8px;\n  font-size: 12px;\n  cursor: pointer;\n  display: flex;\n}\nxm-select > .xm-label .xm-label-block.disabled {\n  background-color: #C2C2C2 !important;\n  cursor: no-drop !important;\n}\nxm-select > .xm-label .xm-label-block.disabled > i {\n  cursor: no-drop !important;\n}\nxm-select > .xm-body {\n  position: absolute;\n  left: 0;\n  top: 42px;\n  padding: 5px 0;\n  z-index: 999;\n  width: 100%;\n  min-width: fit-content;\n  border: 1px solid #E6E6E6;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);\n  animation-name: xm-upbit;\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n}\nxm-select > .xm-body .scroll-body {\n  overflow-x: hidden;\n  overflow-y: auto;\n}\nxm-select > .xm-body .scroll-body::-webkit-scrollbar {\n  width: 8px;\n}\nxm-select > .xm-body .scroll-body::-webkit-scrollbar-track {\n  -webkit-border-radius: 2em;\n  -moz-border-radius: 2em;\n  -ms-border-radius: 2em;\n  border-radius: 2em;\n  background-color: #FFF;\n}\nxm-select > .xm-body .scroll-body::-webkit-scrollbar-thumb {\n  -webkit-border-radius: 2em;\n  -moz-border-radius: 2em;\n  -ms-border-radius: 2em;\n  border-radius: 2em;\n  background-color: #C2C2C2;\n}\nxm-select > .xm-body.up {\n  top: auto;\n  bottom: 42px;\n}\nxm-select > .xm-body.relative {\n  position: relative;\n  display: block !important;\n  top: 0;\n  box-shadow: none;\n  border: none;\n  animation-name: none;\n  animation-duration: 0;\n  min-width: 100%;\n}\nxm-select > .xm-body .xm-group {\n  cursor: default;\n}\nxm-select > .xm-body .xm-group-item {\n  display: inline-block;\n  cursor: pointer;\n  padding: 0 10px;\n  color: #999;\n  font-size: 12px;\n}\nxm-select > .xm-body .xm-option {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: 0 10px;\n  cursor: pointer;\n}\nxm-select > .xm-body .xm-option-icon {\n  color: transparent;\n  display: flex;\n  border: 1px solid #E6E6E6;\n  border-radius: 3px;\n  justify-content: center;\n  align-items: center;\n}\nxm-select > .xm-body .xm-option-icon.xm-icon-danx {\n  border-radius: 100%;\n}\nxm-select > .xm-body .xm-option-content {\n  display: flex;\n  position: relative;\n  padding-left: 15px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  color: #666;\n  width: calc(100% - 20px);\n}\nxm-select > .xm-body .xm-option.hide-icon .xm-option-content {\n  padding-left: 0;\n}\nxm-select > .xm-body .xm-option.selected.hide-icon .xm-option-content {\n  color: #FFF !important;\n}\nxm-select > .xm-body .xm-option .loader {\n  width: 0.8em;\n  height: 0.8em;\n  margin-right: 6px;\n  color: #C2C2C2;\n}\nxm-select > .xm-body .xm-select-empty {\n  text-align: center;\n  color: #999;\n}\nxm-select > .xm-body .disabled {\n  cursor: no-drop;\n}\nxm-select > .xm-body .disabled:hover {\n  background-color: #FFF;\n}\nxm-select > .xm-body .disabled .xm-option-icon {\n  border-color: #C2C2C2 !important;\n}\nxm-select > .xm-body .disabled .xm-option-content {\n  color: #C2C2C2 !important;\n}\nxm-select > .xm-body .disabled.selected > .xm-option-icon {\n  color: #C2C2C2 !important;\n}\nxm-select > .xm-body .xm-search {\n  background-color: #FFF !important;\n  position: relative;\n  padding: 0 10px;\n  margin-bottom: 5px;\n  cursor: pointer;\n}\nxm-select > .xm-body .xm-search > i {\n  position: absolute;\n  color: #666;\n}\nxm-select > .xm-body .xm-search-input {\n  border: none;\n  border-bottom: 1px solid #E6E6E6;\n  padding-left: 27px;\n  cursor: text;\n}\nxm-select > .xm-body .xm-paging {\n  padding: 0 10px;\n  display: flex;\n  margin-top: 5px;\n}\nxm-select > .xm-body .xm-paging > span:first-child {\n  border-radius: 2px 0 0 2px;\n}\nxm-select > .xm-body .xm-paging > span:last-child {\n  border-radius: 0 2px 2px 0;\n}\nxm-select > .xm-body .xm-paging > span {\n  display: flex;\n  flex: auto;\n  justify-content: center;\n  vertical-align: middle;\n  margin: 0 -1px 0 0;\n  background-color: #fff;\n  color: #333;\n  font-size: 12px;\n  border: 1px solid #e2e2e2;\n  flex-wrap: nowrap;\n  width: 100%;\n  overflow: hidden;\n  min-width: 50px;\n}\nxm-select > .xm-body .xm-toolbar {\n  padding: 0 10px;\n  display: flex;\n  margin: -3px 0;\n  cursor: default;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag {\n  cursor: pointer;\n  display: flex;\n  margin-right: 20px;\n  color: #666;\n  align-items: baseline;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag:hover {\n  opacity: 0.8;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag:active {\n  opacity: 1;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag > i {\n  margin-right: 2px;\n  font-size: 14px;\n}\nxm-select > .xm-body .xm-toolbar .toolbar-tag:last-child {\n  margin-right: 0;\n}\nxm-select > .xm-body .xm-body-custom {\n  line-height: initial;\n  cursor: default;\n}\nxm-select > .xm-body .xm-body-custom * {\n  box-sizing: initial;\n}\nxm-select > .xm-body .xm-tree {\n  position: relative;\n}\nxm-select > .xm-body .xm-tree-icon {\n  display: inline-block;\n  margin-right: 3px;\n  cursor: pointer;\n  border: 6px dashed transparent;\n  border-left-color: #C2C2C2;\n  border-left-style: solid;\n  transition: all 0.3s;\n  -webkit-transition: all 0.3s;\n  z-index: 2;\n  visibility: hidden;\n}\nxm-select > .xm-body .xm-tree-icon.expand {\n  margin-top: 3px;\n  margin-right: 5px;\n  margin-left: -2px;\n  transform: rotate(90deg);\n}\nxm-select > .xm-body .xm-tree-icon.xm-visible {\n  visibility: visible;\n}\nxm-select > .xm-body .xm-tree .left-line {\n  position: absolute;\n  left: 13px;\n  width: 0;\n  z-index: 1;\n  border-left: 1px dotted #c0c4cc !important;\n}\nxm-select > .xm-body .xm-tree .top-line {\n  position: absolute;\n  left: 13px;\n  height: 0;\n  z-index: 1;\n  border-top: 1px dotted #c0c4cc !important;\n}\nxm-select > .xm-body .xm-tree .xm-tree-icon + .top-line {\n  margin-left: 1px;\n}\nxm-select > .xm-body .scroll-body > .xm-tree > .xm-option > .top-line,\nxm-select > .xm-body .scroll-body > .xm-option > .top-line {\n  width: 0 !important;\n}\nxm-select > .xm-body .xm-cascader-box {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  padding: 5px 0;\n  border: 1px solid #E6E6E6;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);\n  margin: -1px;\n}\nxm-select > .xm-body .xm-cascader-box::before {\n  content: ' ';\n  position: absolute;\n  width: 0;\n  height: 0;\n  border: 6px solid transparent;\n  border-right-color: #E6E6E6;\n  top: 10px;\n  left: -12px;\n}\nxm-select > .xm-body .xm-cascader-box::after {\n  content: ' ';\n  position: absolute;\n  width: 0;\n  height: 0;\n  border: 6px solid transparent;\n  border-right-color: #fff;\n  top: 10px;\n  left: -11px;\n}\nxm-select > .xm-body .xm-cascader-scroll {\n  height: 100%;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\nxm-select > .xm-body.cascader {\n  width: unset;\n  min-width: unset;\n}\nxm-select > .xm-body.cascader .xm-option-content {\n  padding-left: 8px;\n}\nxm-select > .xm-body.cascader .disabled .xm-right-arrow {\n  color: #C2C2C2 !important;\n}\nxm-select .xm-input {\n  cursor: pointer;\n  border-radius: 2px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #E6E6E6;\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: #FFF;\n  line-height: 1.3;\n  padding-left: 10px;\n  outline: 0;\n  user-select: text;\n  -ms-user-select: text;\n  -moz-user-select: text;\n  -webkit-user-select: text;\n}\nxm-select .dis {\n  display: none;\n}\nxm-select .loading {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(255, 255, 255, 0.6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\nxm-select .loader {\n  border: 0.2em dotted currentcolor;\n  border-radius: 50%;\n  -webkit-animation: 1s loader linear infinite;\n  animation: 1s loader linear infinite;\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  color: inherit;\n  vertical-align: middle;\n  pointer-events: none;\n}\nxm-select .xm-select-default {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: none;\n  visibility: hidden;\n}\nxm-select .xm-select-disabled {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  cursor: no-drop;\n  z-index: 2;\n  opacity: 0.3;\n  background-color: #FFF;\n}\nxm-select .item--divided {\n  border-top: 1px solid #ebeef5;\n  width: calc(100% - 20px);\n  cursor: initial;\n}\nxm-select .xm-right-arrow {\n  position: absolute;\n  color: #666;\n  right: 5px;\n  top: -1px;\n  font-weight: 700;\n  transform: scale(0.6, 1);\n}\nxm-select .xm-right-arrow::after {\n  content: '>';\n}\nxm-select[size='large'] {\n  min-height: 40px;\n  line-height: 40px;\n}\nxm-select[size='large'] .xm-input {\n  height: 40px;\n}\nxm-select[size='large'] .xm-label .scroll .label-content {\n  line-height: 34px;\n}\nxm-select[size='large'] .xm-label .xm-label-block {\n  height: 30px;\n  line-height: 30px;\n}\nxm-select[size='large'] .xm-body .xm-option .xm-option-icon {\n  height: 20px;\n  width: 20px;\n  font-size: 20px;\n}\nxm-select[size='large'] .xm-paging > span {\n  height: 34px;\n  line-height: 34px;\n}\nxm-select[size='large'] .xm-tree .left-line {\n  height: 100%;\n  bottom: 20px;\n}\nxm-select[size='large'] .xm-tree .left-line-group {\n  height: calc(100% - 40px);\n}\nxm-select[size='large'] .xm-tree .xm-tree-icon.xm-hidden + .top-line {\n  top: 19px;\n}\nxm-select[size='large'] .item--divided {\n  margin: 10px;\n}\nxm-select {\n  min-height: 36px;\n  line-height: 36px;\n}\nxm-select .xm-input {\n  height: 36px;\n}\nxm-select .xm-label .scroll .label-content {\n  line-height: 30px;\n}\nxm-select .xm-label .xm-label-block {\n  height: 26px;\n  line-height: 26px;\n}\nxm-select .xm-body .xm-option .xm-option-icon {\n  height: 18px;\n  width: 18px;\n  font-size: 18px;\n}\nxm-select .xm-paging > span {\n  height: 30px;\n  line-height: 30px;\n}\nxm-select .xm-tree .left-line {\n  height: 100%;\n  bottom: 18px;\n}\nxm-select .xm-tree .left-line-group {\n  height: calc(100% - 36px);\n}\nxm-select .xm-tree .xm-tree-icon.xm-hidden + .top-line {\n  top: 17px;\n}\nxm-select .item--divided {\n  margin: 9px;\n}\nxm-select[size='small'] {\n  min-height: 32px;\n  line-height: 32px;\n}\nxm-select[size='small'] .xm-input {\n  height: 32px;\n}\nxm-select[size='small'] .xm-label .scroll .label-content {\n  line-height: 26px;\n}\nxm-select[size='small'] .xm-label .xm-label-block {\n  height: 22px;\n  line-height: 22px;\n}\nxm-select[size='small'] .xm-body .xm-option .xm-option-icon {\n  height: 16px;\n  width: 16px;\n  font-size: 16px;\n}\nxm-select[size='small'] .xm-paging > span {\n  height: 26px;\n  line-height: 26px;\n}\nxm-select[size='small'] .xm-tree .left-line {\n  height: 100%;\n  bottom: 16px;\n}\nxm-select[size='small'] .xm-tree .left-line-group {\n  height: calc(100% - 32px);\n}\nxm-select[size='small'] .xm-tree .xm-tree-icon.xm-hidden + .top-line {\n  top: 15px;\n}\nxm-select[size='small'] .item--divided {\n  margin: 8px;\n}\nxm-select[size='mini'] {\n  min-height: 28px;\n  line-height: 28px;\n}\nxm-select[size='mini'] .xm-input {\n  height: 28px;\n}\nxm-select[size='mini'] .xm-label .scroll .label-content {\n  line-height: 22px;\n}\nxm-select[size='mini'] .xm-label .xm-label-block {\n  height: 18px;\n  line-height: 18px;\n}\nxm-select[size='mini'] .xm-body .xm-option .xm-option-icon {\n  height: 14px;\n  width: 14px;\n  font-size: 14px;\n}\nxm-select[size='mini'] .xm-paging > span {\n  height: 22px;\n  line-height: 22px;\n}\nxm-select[size='mini'] .xm-tree .left-line {\n  height: 100%;\n  bottom: 14px;\n}\nxm-select[size='mini'] .xm-tree .left-line-group {\n  height: calc(100% - 28px);\n}\nxm-select[size='mini'] .xm-tree .xm-tree-icon.xm-hidden + .top-line {\n  top: 13px;\n}\nxm-select[size='mini'] .item--divided {\n  margin: 7px;\n}\n.layui-form-pane xm-select {\n  margin: -1px -1px -1px 0;\n}\n",""])},218:function(e,t,n){var o=n(219);"string"==typeof o&&(o=[[e.i,o,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(27)(o,r);o.locals&&(e.exports=o.locals)},219:function(e,t,n){(e.exports=n(26)(!1)).push([e.i,'@font-face {\n  font-family: "xm-iconfont";\n  src: url(\'//at.alicdn.com/t/font_792691_ptvyboo0bno.eot?t=1574048839056\');\n  /* IE9 */\n  src: url(\'//at.alicdn.com/t/font_792691_ptvyboo0bno.eot?t=1574048839056#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */ url(\'data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAksAAsAAAAAEYAAAAjeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEUgqTXI8lATYCJAM0CxwABCAFhG0HgTwbZQ4jEbaCkVIj+4sD3sS6BFAp9ka91ulVG4leTC/+h+3V+zyRYCTyREKkcZ+D5/u137lPdveLGJBMunoiNPOQPBMq0/FQtEKIkMRDZng69d+hOiQumAr7bJdBOEzMTU77s78mhbI58aCg7ebCs4LBTgCk+cD/4ZqWUHebipp7al3tyKOjwCV/hVyw9PdzaktxI7IMQs26/1N8gV4DI0bVut3UhCaflGGgwM3oTXg1IfRMbCsmrEnriJVeYM2eXHII4KdMMzL4OoACHgZBCTasITcReDUBE8kWPLMTCGoQaDV+eKpUPQI49r8vP6BTPIDCaiBSml3oOQX0voNPebv/u2P0AUfP1w0s5EADzYBZsNdByylo2eVq/NtRdgFpovQR5x2CIwmIZeik6/u0T/m/A7RJP00sCmmyksj/kwc+LC5BFBqDEMDDjwPiANDB9MpJTXwHmsO3YyBwWDA4OFwwJLRcRgAOBUYMDg0mHRwGTAYozsV0AgWYruDwwExDHfzwKWf4OurQ9jzQDtoF+wpistfBfluQ5bQiiJa4ZQoKhShLiMayBbyg05AIkYBoIBJEEApQy/FwYv4HchADIUBXl61dW6mpwIgyp7p8PrHddieSjhY9oqTxyPB/FGNYDklpfYh8VtaoqSgb0bKoGB17CuVUp9Ll2nS2UpNGMSw9hyirA7C6+QLyByIQS0sSSmxvArC5odZmYZMxZSiBR5OkQl0uiufxMH5eL8t3u0d4XKyuq6EMdcpNe2+oXA8p9yPa+4T1PM7+A54tc7tpl2vcAHAftnhZj2chy1CyaCRFsyMqQ5nkNnskEt2yxxZinPsOZjFm4+XWvKqLkfCGS1k4MNP82isxSMf7ZsGYvQVCNAeSSVtzWCxRdXGxyZlA2CvCEevuO7y9M2z2NWH8icydzq/qAJSp1lGvDWFp6Nw3xChJowPD+76nU+upQk6Kw9jI0Rgym9Ct8VlxMI3CSIaDCZja5tDYt0/EYra4tn0Kp3v8Rdezk8svcy1mKhoSvNcZz3LKlUe777Gmval0s7bzAc0k13LGk896V9DuvNn34N0ebKgItkQgOomuJtgQPChNI4cwa7CEWCvfk5QjJFlem6i3SfVShWi5LTFRG+JwdCNpSqbpRFwrtb1TbcRkJi/AbJJQOmfCdnswLNGVM7qqSRO1zO0Q0j5Vr3cYQ07HB0MX6KoIZhx+D9Djs2C5bXtVwvbgJHtSCIL7hjFJme4sZDdS5IlJdKUO1Qt8opn0trBafz3AX933kmCRgyMEWGZjMAkRKhwmIHJGR4ruwFCdWKYzrap2R/mvd2UKajzRAZu88pGAD90Y+02kTFCKrBSXwGGJ3wRcPCdIppTxSmHOfESRwIli0S5J/8AYDCxTGh4XZua4xvfvGx320rDK2qA8g5FlS7pWNLx71+BwgA/KZ5I0aeKmNeCNoNPl8qNHu8uHHzqaKc86fHi4vPuRI4ny+I/vjxw+clh4HXVCFvVnVFx07EHZwVhSRliTTMWSEi0h6YuS6DxCRmiin0B3L4ry6cvR0ijYexFdBL3wGQM0YOrUAZCBkLOBBtQ+xdk7omfgUv+u++admyUeXduyxLM+r/+49rPfhgEZor6GymToNYksNsZyC7ntwAH0928UpgMpxpF0ydNlsMMBw7QsxTCmu0Hf3F+/+vb99Yumhb+e9R0LBNm+4O+hu7lQ5bGjI9j5G88qQ5SLFyuEC7cwd25xoYo2j4eA4bhpM7TZhPtmc+uhVEVSMYXLWh0bfjI8dvUpvDUocPZmU4kwwOfc83wB5wPehrpD3waApbwW+fgRrZXcxw+mB/3woZT+8JFMYwRMIy2k/18qhqcKpjYeYSnIACaUoRDu0e3kQFh98R5fiI8oJqwwGZSJDSbehLzZs7zIeWTQ4UGOIs2c4j2/Q/tn7n7j9juO33On6WhURCT/wO6Y3QdmWFY0Ef6JUeGRggO7ZbtaZlh5RYKWXbLPBLc3l/5h4A0mu3ZXTZ+u6t6VHMAzZhxak50T+24NnRuaOmehRkXlqVR5lIpuwezUUDUdCuJysv8Z/0/8uNE1s7jIJIubFWnI/x7g4nAZx79yYpFoAOU3a9iwT1O/GxUxPY0ljVPv9EukI3qNrl/So2YfzasqHCroNjS0+w0tlPlsYfC6v/01ixquizJH1Kd/VK+OS3iS3rTJWmqsMPdU3B3oFyC9RSumWE/0gG36IjTysfH51IJ/5oOgNYu6p4yb5Fdufhr/Kjtu0oSyYP/WJQrz35aNFnMhtFcwb55NlNnH8Wdu1b+XZA9zqlZrhdPo/V3uBhiUlQ66h0LhbAmFYIncdFOpVMh6Fl7peqy5Z2ZdQBITO2x1Asj1dRFjIBMC3hbuUh8Ooc4W03EjAdo8UL/t0oUfyU8630bmMcw/vqDNAsC9BQD4OqCgH+ljy0UhJB8AAJA+8EmArxk5gnRLik90AElf8rBm+IMvBTWnucb3+0o0ARk+r0ZBv8sU01nnSmP45/H8Dp8C8X+iE9e+ZvXymK/sQJ5/DuqhYKebPnKmPqLYuDcIMWS2/Rjxp2s8Do821LVn6A/xMK1RKvBLK5gyDsZ5uQ6bYusmx2yqLFe4lECHDPcFhojmckuAbnCI6Cn308RI6AAJdtCICQLQyBHKhSgX5YowN6BBPIEB8VxuSfNncpAuutzPnCSiDHDEo+DsKQBPoJi4MpRktepIs2zjO5h84IEMM3ffECKSZU1ZHxfewEI4h494MuuUNNOBjuw18QKHAzEXaAcylS3m3baq9MpnKenYmfEUgCdbXTHEtTVKsvruNGv9/DuYfOAhcuKu9TeEiA9nNJTUDOUbbVkn3sv2eDJrEnVrpvcHOjJeqRsOcpYYLuxoBzKVtCOm3ZaKbtJcurw+e/zN6c7Pd6r4gqUo0WLEiiOueOITvwQkKCEJM9nO3F60y5HkqLhdqUyXZtK3lqwReQ+G40O92UhOt0x/KmKM+u7LTPMzoEBOCYtiUPfSjODiuFXjSDm2idzAoc4Tj9bs2eJYDOU7HQA=\') format(\'woff2\'), url(\'//at.alicdn.com/t/font_792691_ptvyboo0bno.woff?t=1574048839056\') format(\'woff\'), url(\'//at.alicdn.com/t/font_792691_ptvyboo0bno.ttf?t=1574048839056\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url(\'//at.alicdn.com/t/font_792691_ptvyboo0bno.svg?t=1574048839056#iconfont\') format(\'svg\');\n  /* iOS 4.1- */\n}\n.xm-iconfont {\n  font-family: "xm-iconfont" !important;\n  font-size: 16px;\n  font-style: normal;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.xm-icon-quanxuan:before {\n  content: "\\e62c";\n}\n.xm-icon-caidan:before {\n  content: "\\e610";\n}\n.xm-icon-fanxuan:before {\n  content: "\\e837";\n}\n.xm-icon-pifu:before {\n  content: "\\e668";\n}\n.xm-icon-qingkong:before {\n  content: "\\e63e";\n}\n.xm-icon-sousuo:before {\n  content: "\\e600";\n}\n.xm-icon-danx:before {\n  content: "\\e62b";\n}\n.xm-icon-duox:before {\n  content: "\\e613";\n}\n.xm-icon-close:before {\n  content: "\\e601";\n}\n.xm-icon-expand:before {\n  content: "\\e641";\n}\n.xm-icon-banxuan:before {\n  content: "\\e60d";\n}\n',""])},220:function(e,t){(function(t){e.exports=t}).call(this,{})},26:function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=function(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var r=function(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(t);return"/*# ".concat(n," */")}(o),i=o.sources.map((function(e){return"/*# sourceURL=".concat(o.sourceRoot).concat(e," */")}));return[n].concat(i).concat([r]).join("\n")}return[n].join("\n")}(t,e);return t[2]?"@media ".concat(t[2],"{").concat(n,"}"):n})).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},r=0;r=0&&p.splice(t,1)}function x(e){var t=document.createElement("style");if(void 0===e.attrs.type&&(e.attrs.type="text/css"),void 0===e.attrs.nonce){var o=function(){0;return n.nc}();o&&(e.attrs.nonce=o)}return y(t,e.attrs),m(e,t),t}function y(e,t){Object.keys(t).forEach((function(n){e.setAttribute(n,t[n])}))}function v(e,t){var n,o,r,i;if(t.transform&&e.css){if(!(i="function"==typeof t.transform?t.transform(e.css):t.transform.default(e.css)))return function(){};e.css=i}if(t.singleton){var l=u++;n=c||(c=x(t)),o=w.bind(null,n,l,!1),r=w.bind(null,n,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(e){var t=document.createElement("link");return void 0===e.attrs.type&&(e.attrs.type="text/css"),e.attrs.rel="stylesheet",y(t,e.attrs),m(e,t),t}(t),o=C.bind(null,n,t),r=function(){b(n),n.href&&URL.revokeObjectURL(n.href)}):(n=x(t),o=k.bind(null,n),r=function(){b(n)});return o(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;o(e=t)}else r()}}e.exports=function(e,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(t=t||{}).attrs="object"==typeof t.attrs?t.attrs:{},t.singleton||"boolean"==typeof t.singleton||(t.singleton=l()),t.insertInto||(t.insertInto="head"),t.insertAt||(t.insertAt="bottom");var n=h(e,t);return f(n,t),function(e){for(var o=[],r=0;r3)for(n=[n],o=3;or?n-r:r,l=this.labelRef.scrollLeft+e.deltaY;l<0&&(l=0),l>i&&(l=i),this.labelRef.scrollLeft=l}}},{key:"componentDidMount",value:function(){this.labelRef.addEventListener&&this.labelRef.addEventListener("DOMMouseScroll",this.scrollFunc.bind(this),!1),this.labelRef.attachEvent&&this.labelRef.attachEvent("onmousewheel",this.scrollFunc.bind(this)),this.labelRef.onmousewheel=this.scrollFunc.bind(this)}},{key:"render",value:function(e){var t=this,n=e.data,o=e.prop,r=e.theme,i=e.model,l=e.sels,a=e.autoRow,c=o.name,u=o.disabled,p=i.label,d=p.type,f=p[d],h="",m=!0,b=l.map((function(e){return e[c]})).join(",");if("text"===d)h=l.map((function(e){return"".concat(f.left).concat(e[c]).concat(f.right)})).join(f.separator);else if("block"===d){m=!1;var x=N(l),y={backgroundColor:r.color},v=f.showCount<=0?x.length:f.showCount;h=x.splice(0,v).map((function(e){var n={width:f.showIcon?"calc(100% - 20px)":"100%"};return _("div",{class:["xm-label-block",e[u]?"disabled":""].join(" "),style:y},f.template&&s(f.template)?_("span",{style:n,dangerouslySetInnerHTML:{__html:f.template(e,x)}}):_("span",{style:n},e[c]),f.showIcon&&_("i",{class:"xm-iconfont xm-icon-close",onClick:t.iconClick.bind(t,e,!0,e[u])}))})),x.length&&h.push(_("div",{class:"xm-label-block",style:y},"+ ",x.length))}else h=l.length&&f&&f.template?f.template(n,l):l.map((function(e){return e[c]})).join(",");return _("div",{class:["xm-label",a?"auto-row":"single-row"].join(" ")},_("div",{class:"scroll",ref:function(e){return t.labelRef=e}},m?_("div",{class:"label-content",dangerouslySetInnerHTML:{__html:h}}):_("div",{class:"label-content",title:b},h)))}}])&&H(n.prototype,o),r&&H(n,r),t}(C);function Q(e){return(Q="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function J(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function W(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function G(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:this.size;var e=this.state.pageIndex;e<=1||(this.changePageIndex(e-1),this.props.pageRemote&&this.postData(e-1,!0))}},{key:"pageNextClick",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.size,t=this.state.pageIndex;t>=e||(this.changePageIndex(t+1),this.props.pageRemote&&this.postData(t+1,!0))}},{key:"changePageIndex",value:function(e){this.setState({pageIndex:e})}},{key:"searchInput",value:function(e){var t=this,n=e.target.value;n!==this.__value&&(clearTimeout(this.searchCid),this.inputOver&&(this.__value=n,this.searchCid=setTimeout((function(){t.callback=!0,t.setState({filterValue:t.__value,remote:!0,pageIndex:1})}),this.props.delay)))}},{key:"focus",value:function(){this.searchInputRef&&this.searchInputRef.focus()}},{key:"blur",value:function(){this.searchInputRef&&this.searchInputRef.blur()}},{key:"handleComposition",value:function(e){var t=e.type;"compositionstart"===t?(this.inputOver=!1,clearTimeout(this.searchCid)):"compositionend"===t&&(this.inputOver=!0,this.searchInput(e))}},{key:"postData",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state.pageIndex,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];(this.state.remote||n)&&(this.callback=!1,this.setState({loading:!0,remote:!1}),this.blur(),this.props.remoteMethod(this.state.filterValue,(function(t,n){e.focus(),e.callback=!0,e.setState({loading:!1,totalSize:n}),e.props.onReset(t,"data")}),this.props.show,t))}},{key:"keydown",value:function(e,t){var n=this,o=t.keyCode;"div"===e&&(27===o||9===o?this.props.onReset(!1,"close"):37===o?this.pagePrevClick():39===o&&this.pageNextClick());var r=this.props.prop,i=r.value,l=r.optgroup,a=r.disabled,s=this.tempData.filter((function(e){return!e[l]&&!e[a]})),c=s.length-1;if(-1!==c){var u=s.findIndex((function(e){return e[i]===n.state.val}));if(38===o){u<=0?u=c:u>0&&(u-=1);var p=s[u][i];this.setState({val:p})}else if(40===o){-1===u||u===c?u=0:uD&&(M=D),D>0&&M<=0&&(M=1),!v){var T=(M-1)*e.pageSize,z=T+e.pageSize;S=S.slice(T,z)}var L={cursor:"no-drop",color:"#d2d2d2"},V={},F={};M<=1&&(V=L),M==D&&(F=L),this.state.pageIndex!==M&&this.changePageIndex(M),this.size=D,I=_("div",{class:"xm-paging"},_("span",{style:V,onClick:this.pagePrevClick.bind(this,D)},"上一页"),_("span",null,this.state.pageIndex," / ",D),_("span",{style:F,onClick:this.pageNextClick.bind(this,D)},"下一页"))}else e.showCount>0&&(S=S.slice(0,e.showCount));var U,B=[],N={__tmp:!0};N[O]=!0,S.forEach((function(e){var t=P[e[w]];U&&!t&&(t=N),t!=U&&(U=t,t&&B.push(U)),B.push(e)})),S=B,t&&(t=y(this.state.filterValue,c([],S)))&&S.splice(0,0,function(e){for(var t=1;t0||f.lazy&&!1!==e.__node.loading)?"xm-visible":"xm-hidden"].join(" "),C=[];f.showFolderIcon&&(C.push(_("i",{class:w})),f.showLine&&(o&&C.push(_("i",{class:"left-line",style:{left:t-f.indent+3+"px"}})),C.push(_("i",{class:"top-line",style:{left:t-f.indent+3+"px",width:f.indent+(0===o?10:-2)+"px"}}))));var O=function(t){"mouseenter"===t.type&&(e[v]||n.setState({val:e[y]}))};return _("div",{class:m,style:h,value:e[y],onClick:n.optionClick.bind(n,e,r,e[v],"line"),onMouseEnter:O,onMouseLeave:O},C,e.__node.loading&&_("span",{class:"loader"}),k&&_("i",{class:b,style:u,onClick:n.optionClick.bind(n,e,r,e[v],"checkbox")}),_("div",{class:"xm-option-content",dangerouslySetInnerHTML:{__html:p({data:d,item:e,arr:i,name:e[x],value:e[y]})}}))};h&&(m?this.postData():this.filterData(d,this.state.filterValue));var O=c([],d),S=c([],i);this.tempData=O;var j=d.map((function(e){return function e(t,o){if(!t.__node.hidn){var r=t[g];if(o+=f.indent,r){var i=-1!==n.state.expandedKeys.findIndex((function(e){return t[y]===e}));return 0===r.length&&(i=!1),_("div",{class:"xm-tree"},f.showFolderIcon&&f.showLine&&i&&r.length>0&&_("i",{class:"left-line left-line-group",style:{left:o+3+"px"}}),C(t,o,0===r.length&&(!f.lazy||f.lazy&&!1===t.__node.loading)?0:i),i&&_("div",{class:"xm-tree-box"},r.map((function(t){return e(t,o)}))))}return C(t,o,0)}}(e,10-f.indent)})).filter((function(e){return e}));function E(e,t){t.forEach((function(t){return t[w]?(!f.strict&&e.push(t),E(e,t[g])):e.push(t)}))}var A=_("div",{class:"xm-toolbar"},e.toolbar.list.map((function(t){var r,c=e.languageProp.toolbar[t];r="ALL"===t?{icon:"xm-iconfont xm-icon-quanxuan",name:c,method:function(e){var t=[];E(t,e),t=t.filter((function(e){return!e[v]})),n.props.onReset(a?t.slice(0,1):u(t,i,o),"treeData")}}:"CLEAR"===t?{icon:"xm-iconfont xm-icon-qingkong",name:c,method:function(e){n.props.onReset(i.filter((function(e){return e[o.disabled]})),"treeData")}}:"REVERSE"===t?{icon:"xm-iconfont xm-icon-fanxuan",name:c,method:function(e){var t=[];E(t,e),t=t.filter((function(e){return!e[v]}));var r=[];i.forEach((function(e){var n=t.findIndex((function(t){return t[y]===e[y]}));-1==n?r.push(e):t.splice(n,1)})),n.props.onReset(a?r.slice(0,1):u(t,r,o),"treeData")}}:t;var p=function(e){"mouseenter"===e.type&&(e.target.style.color=l.color),"mouseleave"===e.type&&(e.target.style.color="")};return _("div",{class:"toolbar-tag",onClick:function(){s(r.method)&&r.method(O,S)},onMouseEnter:p,onMouseLeave:p},e.toolbar.showIcon&&_("i",{class:r.icon}),_("span",null,r.name))})).filter((function(e){return e}))),R=_("div",{class:h?"xm-search":"xm-search dis"},_("i",{class:"xm-iconfont xm-icon-sousuo"}),_("input",{class:"xm-input xm-search-input",placeholder:b}));return j.length||j.push(_("div",{class:"xm-select-empty"},r)),_("div",{onClick:this.blockClick,class:"xm-body-tree"},e.toolbar.show&&A,R,_("div",{class:"scroll-body",style:{maxHeight:e.height}},j),this.state.loading&&_("div",{class:"loading"},_("span",{class:"loader"})))}},{key:"componentDidMount",value:function(){var e=this.base.querySelector(".xm-search-input");e&&(e.addEventListener("compositionstart",this.handleComposition.bind(this)),e.addEventListener("compositionupdate",this.handleComposition.bind(this)),e.addEventListener("compositionend",this.handleComposition.bind(this)),e.addEventListener("input",this.searchInput.bind(this)),this.searchInputRef=e)}},{key:"componentDidUpdate",value:function(){if(this.callback){this.callback=!1;var e=this.props.filterDone;s(e)&&e(this.state.filterValue,this.tempData||[])}}}])&&ue(n.prototype,o),r&&ue(n,r),t}(C);function be(e){return(be="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function xe(e,t){for(var n=0;n1&&(n=n.slice(0,1)),this.setState({sels:n,dataObj:a,flatData:s})}return this.setState({data:o}),n}},{key:"exchangeValue",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.state.dataObj,o=e.map((function(e){return"object"===Se(e)?Ce({},e,{__node:{}}):n[e]})).filter((function(e){return e})),r=!0,i=this.props.tree;return i.show&&!1===i.strict&&(r=!1),r&&(o=o.filter((function(e){return!0!==e[t.props.prop.optgroup]}))),o}},{key:"value",value:function(e,t,n){!1!==t&&!0!==t&&(t=this.state.show);var o=this.props,r=o.prop,i=o.tree,l=this.exchangeValue(e);if(i.show&&i.strict){var a=this.state.data;this.clearAndReset(a,l),l=this.init({data:a,prop:r},!0)}this.resetSelectValue(l,l,!0,n),this.setState({show:t})}},{key:"clearAndReset",value:function(e,t){var n=this,o=this.props.prop,r=o.selected,i=o.children,l=o.value;e.forEach((function(e){e[r]=-1!=t.findIndex((function(t){return t[l]===e[l]}));var o=e[i];o&&a(o)&&n.clearAndReset(o,t)}))}},{key:"load",value:function(e,t,n,o){var r=this,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,l=this.props,s=l.prop,c=l.tree,u=s.children,p=s.optgroup,d=s.value,f=s.selected,h=s.disabled;e.forEach((function(e){e.__node={parent:o,level:i,loading:e.__node&&e.__node.loading},t[e[d]]=e,n.push(e);var l=e[u];if(l&&a(l)){var s=l.length;if(s>0){r.load(l,t,n,e,i+1),e[p]=!0,c.strict&&(!0===e[f]&&(delete e[f],l.forEach((function(e){return e[f]=!0}))),!0===e[h]&&(delete e[h],l.forEach((function(e){return e[h]=!0}))));var m=l.filter((function(e){return!0===e[f]||!0===e.__node.selected})).length;e.__node.selected=m===s,e.__node.half=m>0&&m0,e.__node.disabled=l.filter((function(e){return!0===e[h]||!0===e.__node.disabled})).length===s}}}))}},{key:"resetSelectValue",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=arguments.length>2?arguments[2]:void 0,o=!(arguments.length>3&&void 0!==arguments[3])||arguments[3],r=this.props.on;if(s(r)&&this.prepare&&o){var i=r({arr:e,change:t,isAdd:n});if(a(i))return this.value(i,null,!1)}this.setState({sels:e})}},{key:"updateBorderColor",value:function(e){this.setState({tmpColor:e})}},{key:"treeHandler",value:function(e,t,n,o){var r=this,i=this.props.prop,l=i.value,a=(i.selected,i.disabled),s=i.children,c=i.optgroup,u=t[s];u.filter((function(e){return!(e[a]||e.__node.disabled)})).forEach((function(t){if(t[c])r.treeHandler(e,t,n,o);else{var i=e.findIndex((function(e){return e[l]==t[l]}));"del"===o?-1!=i&&(e.splice(i,1),n.push(t)):"half"!==o&&"add"!==o||-1==i&&(e.push(t),n.push(t))}}));var p=u.length,d=u.filter((function(t){return-1!==e.findIndex((function(e){return e[l]===t[l]}))||!0===t.__node.selected})).length;t.__node.selected=d===p,t.__node.half=d>0&&d0&&h.length>=g)return this.updateBorderColor(i.maxColor),void(d&&s(d)&&d(h,e));h=a?[e]:[].concat(we(h),[e]),this.resetSelectValue(h,[e],!t)}else{var _=h.findIndex((function(t){return t[m]==e[m]}));-1!=_&&(h.splice(_,1),this.resetSelectValue(h,[e],!t))}var w,k=e.__node.parent;if(k){for(;k;){var C=k[b],O=C.length,S=C.filter((function(e){return-1!==h.findIndex((function(t){return t[m]===e[m]}))||!0===e.__node.selected})).length;k.__node.selected=S===O,k.__node.half=S>0&&S0,k=k.__node.parent}this.setState({data:this.state.data})}u&&!o&&this.onClick()}}},{key:"onClick",value:function(e){var t=this;if("relative"!==this.props.model.type)if(this.props.disabled)!1!==this.state.show&&this.setState({show:!1});else{var n=!this.state.show;if(n){if(this.props.show&&0==this.props.show())return;Object.keys(Be).filter((function(e){return e!=t.props.el})).forEach((function(e){return Be[e].closed()}))}else{if(this.props.hide&&0==this.props.hide())return;this.bodyView.scroll&&this.bodyView.scroll(0,0)}this.setState({show:n}),e&&e.stopPropagation()}}},{key:"onReset",value:function(e,t){var n=this;if("data"===t){var o=e.filter((function(e){return!0===e[n.props.prop.selected]}));this.resetSelectValue(u(o,this.state.sels,this.props.prop),o,!0);var r=[];this.load(e,{},r),this.setState({data:e,flatData:r})}else"sels"===t?this.resetSelectValue(e,e,!0):"append"===t?this.append(e):"delete"===t?this.del(e):"auto"===t?this.auto(e):"treeData"===t?this.value(e,null,!0):"close"===t?this.onClick():"class"===t&&this.setState({bodyClass:e})}},{key:"append",value:function(e){var t=this.exchangeValue(e);this.resetSelectValue(u(t,this.state.sels,this.props.prop),t,!0)}},{key:"del",value:function(e){var t=this.props.prop.value,n=this.state.sels;(e=this.exchangeValue(e)).forEach((function(e){var o=n.findIndex((function(n){return n[t]===e[t]}));-1!=o&&n.splice(o,1)})),this.resetSelectValue(n,e,!1)}},{key:"auto",value:function(e){var t=this,n=this.props.prop.value;e.filter((function(e){return-1!=t.state.sels.findIndex((function(t){return t[n]===e[n]}))})).length==e.length?this.del(e):this.append(e)}},{key:"componentWillReceiveProps",value:function(e){this.init(e,e.updateData)}},{key:"componentWillMount",value:function(){this.init(this.props,!0)}},{key:"render",value:function(e,t){var n=this,o=e.theme,r=e.prop,i=(e.radio,e.repeat,e.clickClose,e.on,e.max,e.maxMethod,e.content),l=e.disabled,a=e.tree,s={borderColor:o.color},c=t.data,u=t.dataObj,p=t.flatData,d=t.sels,f=t.show,h=t.tmpColor,m=t.bodyClass;l&&(f=!1);var b={style:Ce({},e.style,{},f?s:{}),onClick:this.onClick.bind(this),ua:-1!=navigator.userAgent.indexOf("Mac OS")?"mac":"win",size:e.size,tabindex:1};h&&(b.style.borderColor=h,setTimeout((function(){b.style.borderColor="",n.updateBorderColor("")}),300)),r.value;var x=Ce({},e,{data:c,sels:d,ck:this.itemClick.bind(this),title:d.map((function(e){return e[r.name]})).join(",")}),y=Ce({},e,{data:c,dataObj:u,flatData:p,sels:d,ck:this.itemClick.bind(this),show:f,onReset:this.onReset.bind(this)}),v=i?_(se,y):a.show?_(me,y):e.cascader.show?_(_e,y):_(ne,y);return _("xm-select",b,_("input",{class:"xm-select-default","lay-verify":e.layVerify,"lay-verType":e.layVerType,name:e.name,value:d.map((function(e){return e[r.value]})).join(",")}),_("i",{class:f?"xm-icon xm-icon-expand":"xm-icon"}),0===d.length&&_("div",{class:"xm-tips"},e.tips),_(Z,x),_("div",{class:["xm-body",m,e.model.type,f?"":"dis"].join(" "),ref:function(e){return n.bodyView=e}},v),l&&_("div",{class:"xm-select-disabled"}))}},{key:"componentDidMount",value:function(){var e=this;this.prepare=!0,this.base.addEventListener("keydown",(function(t){13===t.keyCode&&e.onClick()})),this.input=this.base.querySelector(".xm-select-default");var t=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;t&&new t((function(t){t.forEach((function(t){"attributes"==t.type&&"class"===t.attributeName&&-1!==e.input.className.indexOf("layui-form-danger")&&(e.input.className="xm-select-default",e.base.style.borderColor=e.props.theme.maxColor)}))})).observe(this.input,{attributes:!0});for(var n=this.base;n;){if("FORM"===n.tagName){var o=n.querySelector('button[type="reset"]');o&&o.addEventListener("click",(function(t){e.init(e.props,!0)}));break}n=n.parentElement}}},{key:"componentDidUpdate",value:function(){var e=this.props,t=e.direction;if("relative"!==e.model.type){var n=this.base.getBoundingClientRect();if("auto"===t){this.bodyView.style.display="block",this.bodyView.style.visibility="hidden";var o=this.bodyView.getBoundingClientRect().height;this.bodyView.style.display="",this.bodyView.style.visibility="";var r=n.y||n.top||0,i=document.documentElement.clientHeight-r-n.height-20;t=i>o||r0&&void 0!==arguments[0]?arguments[0]:"zn",t=De[e]||Ie;return{language:e,languageProp:t,data:[],content:"",name:"select",layVerify:"",layVerType:"",size:"medium",disabled:!1,initValue:null,create:null,tips:t.tips,empty:t.empty,delay:500,searchTips:t.searchTips,filterable:!1,filterMethod:function(e,t,n,o){return!e||-1!=t[o.name].indexOf(e)},remoteSearch:!1,remoteMethod:function(e,t){t([])},direction:"auto",style:{},height:"200px",autoRow:!1,paging:!1,pageSize:10,pageEmptyShow:!0,pageRemote:!1,radio:!1,repeat:!1,clickClose:!1,max:0,maxMethod:function(e,t){},showCount:0,toolbar:{show:!1,showIcon:!0,list:["ALL","CLEAR"]},tree:{show:!1,showFolderIcon:!0,showLine:!0,indent:20,expandedKeys:[],strict:!0,lazy:!1,load:null},cascader:{show:!1,indent:100,strict:!0},prop:{name:"name",value:"value",selected:"selected",disabled:"disabled",children:"children",optgroup:"optgroup",click:"click"},theme:{color:"#009688",maxColor:"#e54d42",hover:"#f2f2f2"},model:{label:{type:"block",text:{left:"",right:"",separator:", "},block:{showCount:0,showIcon:!0,template:null},count:{template:function(e,t){return"已选中 ".concat(t.length," 项, 共 ").concat(e.length," 项")}}},icon:"show",type:"absolute"},show:function(){},hide:function(){},template:function(e){e.item,e.sels;var t=e.name;return e.value,t},on:function(e){e.arr,e.item,e.selected}}}(e.language),this.update(e)}},{key:"update",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=!!e.data;this.options=c(this.options,e);var n=this.options.dom;if(n){var o=this.options.data||[];if("function"==typeof o&&(o=o(),this.options.data=o),a(o))return U(_(Pe,ze({},this.options,{updateData:t})),n),this;l("data数据必须为数组类型, 不能是".concat("undefined"==typeof data?"undefined":Le(data),"类型"))}else l("没有找到渲染对象: ".concat(e.el,", 请检查"))}},{key:"reset",value:function(){var e=this.options.el;return this.init(Ne[e]),He[e].init(this.options,!0),this}},{key:"opened",value:function(){var e=He[this.options.el];return!e.state.show&&e.onClick(),this}},{key:"closed",value:function(){var e=He[this.options.el];return e.state.show&&e.onClick(),this}},{key:"getValue",value:function(e){var t=this,n=He[this.options.el].state.sels.map((function(e){return delete(e=function(e){for(var t=1;t2&&void 0!==arguments[2]&&arguments[2];if(a(e))return He[this.options.el].value(this.options.radio?e.slice(0,1):e,t,n),this;l("请传入数组结构...")}},{key:"append",value:function(e){if(a(e))return He[this.options.el].append(e),this;l("请传入数组结构...")}},{key:"delete",value:function(e){if(a(e))return He[this.options.el].del(e),this;l("请传入数组结构...")}},{key:"warning",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=e||this.options.theme.maxColor;return!0===t?He[this.options.el].base.style.borderColor=n:He[this.options.el].updateBorderColor(n),this}}])&&Ve(t.prototype,n),o&&Ve(t,o),e}();function Ue(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t
+
+
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+
+
+
+
+
+

+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file