You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

840 lines
42 KiB
Plaintext

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>傻瓜表单样式定义</title>
<script src="../../../Scripts/jquery-1.11.0.min.js"></script>
<script src="../../../Scripts/QueryString.js" type="text/javasFoolFrmBodycript">
</script>
<script src="../../../Scripts/config.js" type="text/javascript"></script>
<script src="../../../Scripts/QueryString.js" type="text/javascript"></script>
<script src="../../../Comm/Gener.js" type="text/javascript"></script>
<link href="../../CSS/FoolFrmBody.css" rel="stylesheet" />
<link href="../../CSS/Toolbar.css" rel="stylesheet" />
<link href="../../../Style/skin/css/Default.css" rel="stylesheet" />
<link href="../../../Style/skin/adminfont/iconfont.css" rel="stylesheet" />
<link href="../../../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
<script src="../../../Scripts/layui/layui/layui.js" type="text/javascript"></script>
<link href="../../../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- <script src="../../Admin.js"></script>-->
<!--<link href="../../../Scripts/bootstrap/css/bootstrap.css" rel="Stylesheet" />-->
<!-- 用于显示图标 -->
<link href="../../../Comm/fonts/simple-line-icons.css" rel="stylesheet" />
<link href="../../../Comm/fonts/font-icons.min.css" rel="stylesheet" />
<link href="../../../Comm/fonts/font-awesome.css" rel="stylesheet" />
<script src="StyleEditor.js"></script>
<!-- 字段的三个风格. -->
<style type="text/css">
.layui-btn-radius {
border-radius: 10px;
}
.FoolFrmBody table tr td {
position: relative
}
.input-group {
position: absolute;
z-index: 99;
left: 15px;
top: 17px;
}
.FoolFrmBody input {
padding-left: 25px;
}
.layui-row {
margin-bottom: 5px;
}
.layui-col-xs2 {
padding-left: 5px
}
.layui-inline {
margin-bottom: 5px;
}
.layui-input-inline {
width: 100px !important;
}
.input-icon {
position: absolute;
left: 1px;
top: 1px;
width: 38px;
line-height: 36px;
text-align: center;
color: #d2d2d2;
}
.layui-input, .layui-select, .layui-textarea {
height: 38px;
line-height: 1.3;
line-height: 38px\9;
border-width: 1px;
border-style: solid;
background-color: #fff;
border-radius: 2px;
}
</style>
<script type="text/javascript">
var styleNo = null;
layui.use(['dropdown', 'colorpicker', 'layer', 'table', 'form', 'laydate'], function () {
var dropdown = layui.dropdown
, form = layui.form
, layer = layui.layer
, colorpicker = layui.colorpicker
, laydate = layui.laydate
, element = layui.element
, $ = layui.jquery;
form.render('select');
//绑定模版.
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
ens = hander.DoMethodReturnJSON("Default_GenerTemplate");
var templates = [];
var templateName = GetQueryString("Template");
templateName = templateName == null || templateName == undefined ? "" : templateName;
$.each(ens, function (i, item) {
if (item.No == templateName) {
$("#TB_Template").html(item.Name);
}
templates.push({
"id": item.No,
"title": item.Name
});
})
dropdown.render({
elem: '#Btn_Template'
, data: templates
, click: function (obj) {
TemplateChange(obj.id);
}
});
if (templateName && templateName.indexOf("Sys.") > 0)
$("#Btn_Delete").attr("disabled", "disabled");
//绑定面板.
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
ens = hander.DoMethodReturnJSON("Default_GenerGloVars");
//绑定风格文件
GenerBindDDL("DDL_Style", ens, "No", "Name");
//装载风格文件.
LoadCss();
//增加事件,调用 StyleEditer.js .
AddEventExt();
//增加字段icon.
AddICON();
styleNo = $("#DDL_Style").val();
//设置颜色
$.each($(".layui-color"), function (i, item) {
var id = item.id;
//开启全功能
colorpicker.render({
elem: '#' + id
, color: ''
, format: 'rgb'
, predefine: true
, alpha: true
, done: function (color) {
var cssID = this.elem.replace("#div_", "");
$('#TBPara_' + cssID).val(color); //向隐藏域赋值
var changeobj = $('#DDL_Style').val();//要改变的对象.
if (changeobj) { //判断是否有选中对象
var cssText = $("." + changeobj).attr("style")
cssText = cssText == null || cssText == undefined ? "" : cssText;
cssText = cssText + cssID + ":" + color + " !important";
$("." + changeobj).css("cssText", cssText);
setTimeout(function () { }, 500);
}
color || this.change(color); //清空时执行 change
}
, change: function (color) {
var cssID = this.elem.replace("#div_", "");
//给当前页面头部和左侧设置主题色
var changeobj = $('#DDL_Style').val();//要改变的对象.
console.log(changeobj)
if (changeobj) { //判断是否有选中对象
/*var cssText = $("." + changeobj).attr("style") + cssID + ":" + color + " !important";
//$("." + changeobj).css(cssID, color);
$("." + changeobj).css("cssText", cssText);
setTimeout(function () { }, 500);*/
var cssText = $("." + changeobj).attr("style")
cssText = cssText == null || cssText == undefined ? "" : cssText;
cssText = cssText + cssID + ":" + color + " !important";
$("." + changeobj).css("cssText", cssText);
setTimeout(function () { }, 500);
}
}
});
});
//处理工具栏按钮
$('.layui-toolbar').on('click', function () {
var url = "";
var title = "";
var type = $(this).data('type');
switch (type) {
case "Back": //返回
Back();
break;
case "Btn_App"://应用
App();
break;
case "Btn_Delete"://删除模板
Delete(templateName);
break;
case "Btn_Save"://保存为模板
SaveAsTemplate();
break;
case "Btn_Refresh"://刷新
Reload();
break;
default: break;
}
});
//改变风格Style
form.on('select(StyleChange)', function (data) {
if (data.value == null || data.value == "") {
//显示.
$("#styleeditor").hide();
return;
}
if (data.value == "FoolFrmTable") {
$(".stylegroup").hide();
$(".styledetail").hide();
} else {
$(".stylegroup").show();
$(".styledetail").show();
}
DDLChange(data.value, colorpicker);
form.render('select');
});
form.on('select(ChangeStyle)', function (data) {
DDLChange("FoolFrmFieldInput", colorpicker);
form.render('select');
})
//字体大小单位的监听
form.on('select(unit)', function (data) {
var id = data.elem.id;
var textId = id.replace("-unit", "");
var changeobj = $('#DDL_Style').val();//要改变的对象
var thispropertyval = $("#" + textId).val();//文字大小的值
if (changeobj) {//判断是否有选中对象
var cssText = $("." + changeobj).attr("style")
cssText = cssText == null || cssText == undefined ? "" : cssText;
cssText += "font-size:" + thispropertyval + data.value + " !important";
$("." + changeobj).css("cssText", cssText);
}
});
//字体设计
form.on('select(font)', function (data) {
var id = data.elem.id;
var cssID = id.replace("TBPara_", "");
cssID = cssID.replace("DDLPara_", "");
var changeobj = $('#DDL_Style').val();//要改变的对象
if (changeobj) {
var cssText = $("." + changeobj).attr("style")
cssText = cssText == null || cssText == undefined ? "" : cssText;
cssText +=cssID + ":" + data.value + " !important";
$("." + changeobj).css("cssText", cssText);
}
})
//边框
form.on('select(borderWhich)', function (data) {
var changeobj = $('#DDL_Style').val();
var thispropertyval = $("#TBPara_border-width_Temp").val();
var borderselect = data.value;
if (changeobj) {
var cssText = $("." + changeobj).attr("style");
cssText = cssText == null || cssText == undefined ? "" : cssText;
if (borderselect == "all") {
cssText += "border-width:" + thispropertyval + $("#TBPara_border-width-unit_Temp").val() + " !important";
} else {
cssText += "border-" + borderselect + "-width:" + thispropertyval + $("#TBPara_border-width-unit_Temp").val() + " !important";
}
$("." + changeobj).css("cssText", cssText);
}
})
//表单中标签或者输入框的点击事件
$.each(ens, function (i, en) {
$("." + en.No).attr("data-info", en.No);
$("." + en.No).on('click', function () {
if ($(this).attr("data-info") == "FoolFrmFieldRow" || $(this).attr("data-info") == "FoolFrmTitle")
return;
DDLChange($(this).attr("data-info"), colorpicker);
form.render();
return;
})
})
form.render();
/**
* 改变模板文件
* @param val
*/
function TemplateChange(val) {
if (val == "" || val == undefined) {
return;
}
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
hander.AddPara("Name", val);
var msg = hander.DoMethodReturnString("Default_Template_Selected");
var url = "?FK_MapData=" + GetQueryString("FK_MapData");
url += "&FrmID=" + GetQueryString("FrmID");
url += "&FK_Node=" + GetQueryString("FK_Node");
url += "&FK_Flow=" + GetQueryString("FK_Flow");
url += "&Template=" + val;
SetHref(url);
}
/**
*退回
*/
function Back() {
var url = "../Designer.htm?FK_MapData=" + GetQueryString("FK_MapData");
url += "&FrmID=" + GetQueryString("FrmID");
url += "&FK_Flow=" + GetQueryString("FK_Flow");
url += "&FK_Node=" + GetQueryString("FK_Node");
SetHref(url);
}
/*
* 应用
*/
function App() {
layer.confirm('您确认要执行吗?确定后,就会替换现在的风格文件。', {
btn: ['确定', '取消']
}, function (index) {
layer.close(index);
SaveItem();
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
var data = hander.DoMethodReturnString("Default_App");
if (data.indexOf('err@') == 0) {
layer.alert(data);
return;
}
Back();
}, function (index) {
layer.close(index);
});
}
/**
* 删除模板
*/
function Delete(val) {
if (val == "") {
layer.alert("请选择一个模版.");
return;
}
layer.confirm('您确认要执行删除吗?', {
btn: ['确定', '取消']
}, function (index) {
layer.close(index);
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
hander.AddPara("Name", val);
var data = hander.DoMethodReturnString("Default_Template_Delete");
alert(data);
if (data.indexOf('err@') == 0) {
alert(data);
return;
}
Reload();
}, function (index) {
layer.close(index);
});
}
/**
* 保存为模板
*/
function SaveAsTemplate() {
layer.prompt({
title: '请输入模版名称,不能有特殊符号.',
formType: 0,
value: '',
}, function (str, index) {
layer.close(index);
if (str == null || str == undefined || str == "")
return;
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
hander.AddPara("TemplateName", str);
var data = hander.DoMethodReturnString("Default_SaveAsTemplate");
layer.alert(data);
if (data.indexOf('err@') == 0)
return;
});
}
/**
* 动态加载css样式
*/
function LoadCss() {
var url = "../../../../DataUser/Style/FoolFrmStyle/DefaultPreview.css?ref=11" + Math.random();
// 动态加载css
var loadStyle = function (url) {
var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
};
// css加载
loadStyle(url);
$('head').children(':last').attr({
rel: "stylesheet",
type: 'text/css',
href: url,
});
}
function SetICONForCtrl(id, icon) {
var html = "";
html += ' <i class="' + icon + '"></i>';
$('#' + id).before(html);
$("#" + id).css("padding-left", "40px");
}
function AddICON() {
SetICONForCtrl("TB_Tel", "input-icon icon-phone");
SetICONForCtrl("TB_Email", "input-icon icon-envelope-letter");
SetICONForCtrl("TB_Addr", "input-icon icon-location-pin");
SetICONForCtrl("TB_SQR", "input-icon layui-icon layui-icon-username");
SetICONForCtrl("TB_SQRQ", "input-icon layui-icon layui-icon-date");
}
});
//保存应用.
function SaveItem(styleNo) {
if (styleNo == null || styleNo == undefined)
styleNo = $("#DDL_Style").val();
en = new Entity("BP.Sys.GloVar", styleNo);
$("#Btn_SaveItem").val("正在保存...");
if (en.AtPara == null || en.AtPara == undefined)
en.AtPara = "";
//处理数据.
DealHidCtrl();
//设置为空.
en.AtPara = "";
//执行copy.
en.CopyForm();
en.Val = en.AtPara;
if (en.Val == "") {
alert("err");
return;
}
// alert(en.AtPara);
en.Update();
//生成风格文件作用于.
var hander = new HttpHandler("BP.WF.HttpHandler.WF_Admin_FoolFormDesigner_StyletDfine");
var data = hander.DoMethodReturnString("GloValStyles_App");
$("#Btn_SaveItem").val("保存成功....");
setTimeout(function () { $("#Btn_SaveItem").val("保存"); }, 500);
}
//调样式的面板
function DDL_Style_Change() {
var val = $("#DDL_Style").val();
if (val == null || val == "") {
//显示.
$("#styleeditor").hide();
//执行一次保存.
//SaveItem();
return;
}
if (val == "FoolFrmTable") {
$(".stylegroup").hide();
$(".styledetail").hide();
} else {
$(".stylegroup").show();
$(".styledetail").show();
}
DDLChange(val);
}
function DDLChange(changeToStyleNo, colorpicker) {
//显示.
$("#styleeditor").show();
//保存旧的条目.
SaveItem(styleNo);
styleNo = changeToStyleNo;
en = new Entity("BP.Sys.GloVar", styleNo);
//执行批量赋值.
var val = en.Val;
en.AtPara = val;
GenerFullAllCtrlsVal(en);
$("#DDL_Style").val(styleNo);
}
</script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header" style="text-align: center;box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);background-color:white">
<div class="layui-btn-container" style="padding-top:10px">
<button type="button" class="layui-btn layui-btn-sm layui-toolbar" data-type="Back">
<i class="layui-icon layui-icon-return"></i>返回
</button>
<button class="layui-btn layui-btn-normal layui-btn-sm layui-toolbar" id="Btn_Template">
<span id="TB_Template">请选择模板</span>
<i class="layui-icon layui-icon-down layui-font-12"></i>
</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-sm layui-toolbar" data-type="Btn_App">
<i class="layui-icon layui-icon-app"></i>应用
</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm layui-toolbar" data-type="Btn_Delete" id="Btn_Delete">
<i class="layui-icon layui-icon-delete"></i>删除模版
</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-sm layui-toolbar" data-type="Btn_Save">
<i class="layui-icon layui-icon-save"></i>保存为模版
</button>
<button type="button" class="layui-btn layui-btn-sm layui-toolbar " data-type="Btn_Refresh">
<i class="layui-icon layui-icon-refresh"></i>刷新
</button>
</div>
</div>
<div class="layui-body" style="margin-top:20px;left:15px">
<div class="layui-row">
<form class="layui-form">
<div class="layui-col-xs8">
<div class="layui-card layui-panel" style="height:100%">
<div class="layui-card-body">
<div class="layui-row FoolFrmTitle">
<div class="layui-col-xs12">
<div class="FoolFrmTitleIcon pull-right"><img src='../../../../DataUser/ICON/LogBiger.png' style='height:40px;' /></div>
<div class="FoolFrmTitleLable">傻瓜表单样式定义器</div>
</div>
</div>
<div class="layui-row FoolFrmGroupBar">
<div class="layui-col-xs12">基本信息</div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel">申请人</div>
<div class="layui-col-xs4">
<input class="layui-input FoolFrmFieldInput" type="text" id="TB_SQR" value="驰骋工作流" />
</div>
<div class="layui-col-xs2 FoolFrmFieldLabel">申请日期</div>
<div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_SQRQ" value="2003-02-23" /></div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel">地址</div>
<div class="layui-col-xs10">
<input class="layui-input FoolFrmFieldInput" type="text" id="TB_Addr" value="济南市.高新区.碧桂园凤凰中心19层" />
</div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs12 FoolFrmFieldLabel"><span style="color:red">*</span>申请原因</div>
<div class="layui-col-xs12">
<textarea class="layui-textarea FoolFrmFieldInput" id="TB_SQYY" placeholder="不少于50字请仔细填写" cols="10"></textarea>
</div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel">电话</div>
<div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_Tel" value="0531-82374939" /></div>
<div class="layui-col-xs2 FoolFrmFieldLabel">邮件</div>
<div class="layui-col-xs4"><input class="layui-input FoolFrmFieldInput" type="text" id="TB_Email" value="ccs@ccflow.org" /></div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel"> 是否执行到位?</div>
<div class="layui-col-xs4 FoolFrmFieldInput">
<div class="">
<input type="checkbox" name="CB_IsOK" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
<div class="layui-col-xs2 FoolFrmFieldLabel">性别</div>
<div class="layui-col-xs4">
<select name="DDL_XB" id="DDL_XB" lay-filter="ChangeStyle">
<option value="1">男</option>
<option value="0">女</option>
</select>
</div>
</div>
<div class="layui-row FoolFrmFieldRow">
<div class="layui-col-xs2 FoolFrmFieldLabel">整治面貌</div>
<div class="layui-col-xs10 FoolFrmFieldInput">
<input type="radio" id="TB_ZZMM_0" name="ZZMM" value="0" title="群众" checked>
<input type="radio" id="TB_ZZMM_1" name="ZZMM" value="1" title="团员" />
<input type="radio" id="TB_ZZMM_2" name="ZZMM" value="2" title="党员" />
<input type="radio" id="TB_ZZMM_3" name="ZZMM" value="3" title="无党派人士" />
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="layui-card layui-panel" style="margin: 0px 30px 30px;">
<div class="layui-card-body">
<div>
<div>
<select name="DDL_Style" id="DDL_Style" lay-filter="StyleChange" style="width:200px"></select>
<div id="styleeditor" style="display:block;width:100%;">
<div class="ttstyle">整体</div>
<div class="styletitle layui-inline">
<label class="layui-form-label"> 背景颜色:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" type="hidden" id="TBPara_background-color" value="" />
<div id="div_background-color" class="layui-color"></div>
</div>
</div>
<div class="layui-inline styletitle">
<label class="layui-form-label"> 整体宽度:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_selfbody-width_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_selfbody-width-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_selfbody-width" />
</div>
<div class="layui-inline styletitle">
<label class="layui-form-label"> 整体高度:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_selfbody-hight_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_selfbody-hight-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_selfbody-hight" />
</div>
<div class="ttstyle stylegroup">字体</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label">字体大小:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_font-size_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_font-size-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_font-size" />
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 字体粗细:</label>
<div class="layui-input-inline">
<select id="TBPara_font-weight" lay-filter="font">
<option value="normal">正常</option>
<option value="bold">加粗</option>
</select>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 字体样式:</label>
<div class="layui-input-inline">
<select id="TBPara_font-style" lay-filter="font">
<option value="normal">正常</option>
<option value="italic">斜体</option>
</select>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label">字体行高:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_font-height_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_font-height-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_font-height" />
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label">字体款式:</label>
<div class="layui-input-inline">
<select id="TBPara_font-family" lay-filter="font">
<option value="SimSun">宋体</option>
<option value="SimHei">黑体</option>
<option value="Microsoft YaHei">微软雅黑</option>
<option value="Microsoft JhengHei">微软正黑体</option>
<option value="NSimSun">新宋体</option>
<option value="PMingLiU">新细明体</option>
<option value="MingLiU">细明体</option>
<option value="DFKai-SB">标楷体</option>
<option value="FangSong">仿宋</option>
<option value="KaiTi">楷体</option>
</select>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 字体颜色:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_color" value="" type="hidden" />
<div id="div_color" class="layui-color"></div>
</div>
</div>
<div class="ttstyle stylegroup">
<label class="layui-form-label"> 边框:</label>
<div class="layui-input-inline" style="float:left">
<select id="TBPara_border-which" lay-filter="borderWhich">
<option value="all" selected>全部</option>
<option value="top">上</option>
<option value="bottom">下</option>
<option value="left">左</option>
<option value="right">右</option>
</select>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 边框宽度:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_border-width_Temp" value="" />
</div>
<div class="layui-input-inline">
<select id="TBPara_border-width-unit_Temp" lay-filter="unit">
<option value="px">px</option>
<option value="pt">pt</option>
<option value="em">em</option>
<option value="ex">ex</option>
<option value="pc">pc</option>
<option value="cm">cm</option>
<option value="mm">mm</option>
<option value="in">in</option>
<option value="%">%</option>
</select>
</div>
<input type="hidden" id="TBPara_border-width" />
</div>
<div class="styletitle styledetail">
<label class="layui-form-label"> 边框颜色:</label>
<div class="layui-input-inline">
<input class="borderwidthval layui-input" id="TBPara_border-color" value="" type="hidden" />
<div id="div_border-color" class="layui-color"></div>
</div>
</div>
<div class="styletitle styledetail layui-inline">
<label class="layui-form-label"> 边框样式:</label>
<div class="layui-input-inline">
<select id="DDLPara_border-style" lay-filter="font" style="width:50px">
<option value="none">无</option>
<option value="solid">实线</option>
<option value="double">双线</option>
<option value="groove">3D凹槽</option>
<option value="ridge">3D垄状</option>
<option value="dashed">虚线</option>
<option value="dotted">点状</option>
</select>
</div>
</div>
</div>
<button type="button" id="Btn_SaveItem" onclick="SaveItem()" class="layui-btn layui-btn-fluid">保存</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>