eCoWorksV3.git - Gitblit

fs-danaus

2024-03-15 a9ee24e8d43da1b4ddf9318b91d739e829fc80ab

提交 \| 用户 \| age
a724cc	1	<!DOCTYPE html>
X	2	<html lang="zh-cn">
	3
	4	<head>
	5	<meta charset="UTF-8">
	6	<meta name="viewport"
	7	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	8	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	9	<title>文字样式编辑</title>
	10	<link rel="stylesheet" href="/general/textCssEdit/js/layui/css/layui.css" >
	11	<link rel="stylesheet" href="/general/textCssEdit/css/iconfont/iconfont.css" >
	12	<link rel="stylesheet" href="/general/textCssEdit/css/main.css">
	13
	14
	15	</head>
	16
	17	<body class="main-container text-css-edit-container">
	18	<!--<button type="button" class="layui-btn layui-btn-normal layui-btn-radius open-edit-btn">打开编辑层</button>-->
	19
	20
	21	<!-- 编辑层 -->
	22	<div class="text-edit-layer">
	23	<div class="text-edit-container">
	24	<header class="text-edit-header text-center">
	25	<p class="desc">预览</p>
	26	<div class="text-edit-preview-div"><span class="text-edit-preview">中国有960万平方公里</span></div>
	27	</header>
	28	<div class="text-edit-container-content">
	29	<div class="text-edit-content text-edit-table">
	30	<div class="margin-center ">
	31	<form class="layui-form" action="" lay-filter="text-css-form">
	32
	33	<div class="layui-form-item flex flex-row flex-jc-between font-row">
	34	<div class="layui-input-inline font-family-input">
	35	<select name="fontFamily" lay-verify="required" lay-search>
	36	<option value="">选择字体</option>
	37	</select>
	38	</div>
	39	<div class="layui-input-inline font-size-input">
	40	<select name="fontSize" lay-verify="required" lay-search>
	41	<option value="">字号</option>
	42
	43	</select>
	44	</div>
	45	</div>
	46
	47	<div class="layui-form-item flex flex-row flex-jc-between font-style-row">
	48	<div class="font-style-checkbox">
	49	<input type="checkbox" name="fontWeight" value="bold" lay-skin="tag">
	50	<div lay-checkbox>
	51	<i class="layui-icon layui-icon-fonts-strong" style="position: relative;"></i>
	52	</div>
	53	</div>
	54	<div class="font-style-checkbox">
	55	<input type="checkbox" name="fontStyle" value="italic" lay-skin="tag">
	56	<div lay-checkbox>
	57	<i class="layui-icon layui-icon-fonts-i" style="position: relative;"></i>
	58	</div>
	59	</div>
	60	<!-- <div class="font-style-checkbox">-->
	61	<!-- <input type="radio" name="textDecoration" value="underline" title="默认">-->
	62	<!-- <div lay-radio>-->
	63	<!-- <span style="color: blue;">自定义模板 ♂</span>-->
	64	<!-- </div>-->
	65	<!-- <input type="radio" name="textDecoration" value="1" title="默认">-->
	66	<!-- <div lay-radio>-->
	67	<!-- <span style="color: pink;">自定义模板 ♀</span>-->
	68	<!-- </div>-->
	69	<!-- </div>-->
	70
	71	<div class="font-style-checkbox text-decoration">
	72	<input type="checkbox" name="textDecoration" value="underline" lay-skin="tag" lay-filter="text-decoration">
	73	<div lay-checkbox>
	74	<i class="layui-icon layui-icon-fonts-u" style="position: relative;"></i>
	75	</div>
	76	</div>
	77	<div class="font-style-checkbox text-decoration">
	78	<input type="checkbox" name="textDecoration" value="line-through" lay-skin="tag" lay-filter="text-decoration">
	79	<div lay-checkbox>
	80	<i class="layui-icon layui-icon-fonts-del" style="position: relative;"></i>
	81	</div>
	82	</div>
	83	</div>
	84
	85	<div class="layui-form-item flex flex-row flex-jc-between">
	86	<label class="layui-form-label">字体颜色</label>
	87	<div class="layui-input-inline font-color-input color-input">
	88	<select name="color" lay-verify="required" lay-search lay-filter="color-input">
	89	<option value="">选择字体颜色</option>
	90	</select>
	91	</div>
	92	</div>
	93
	94	<div class="layui-form-item flex flex-row flex-jc-between">
	95	<label class="layui-form-label">背景颜色</label>
	96	<div class="layui-input-inline font-bg-color-input color-input">
	97	<select name="backgroundColor" lay-verify="required" lay-search lay-filter="color-input">
	98	<option value="">选择背景颜色</option>
	99	</select>
	100	</div>
	101	</div>
	102
	103	<div class="layui-form-item flex flex-row flex-jc-between">
	104	<label class="layui-form-label">边框</label>
	105	<div class="flex flex-row flex-jc-between border-style-row">
	106	<div class="font-style-checkbox">
a61f53	107	<input type="checkbox" name="borderTopWidth" value="2px" lay-skin="tag">
a724cc	108	<div lay-checkbox>
X	109	<i class="iconfont icon-shangbiankuang" style="position: relative;"></i>
	110	</div>
	111	</div>
	112	<div class="font-style-checkbox">
a61f53	113	<input type="checkbox" name="borderRightWidth" value="2px" lay-skin="tag">
a724cc	114	<div lay-checkbox>
X	115	<i class="iconfont icon-youbiankuang" style="position: relative;"></i>
	116	</div>
	117	</div>
	118	<div class="font-style-checkbox">
a61f53	119	<input type="checkbox" name="borderBottomWidth" value="2px" lay-skin="tag">
a724cc	120	<div lay-checkbox>
X	121	<i class="iconfont icon-xiabiankuang" style="position: relative;"></i>
	122	</div>
	123	</div>
	124	<div class="font-style-checkbox">
a61f53	125	<input type="checkbox" name="borderLeftWidth" value="2px" lay-skin="tag">
a724cc	126	<div lay-checkbox>
X	127	<i class="iconfont icon-zuobiankuang" style="position: relative;"></i>
	128	</div>
	129	</div>
	130	</div>
	131	</div>
	132
	133	<div class="layui-form-item flex flex-row flex-jc-between">
	134	<label class="layui-form-label">边框样式</label>
	135	<div class="layui-input-inline border-style-input">
	136	<select name="borderStyle" lay-verify="required" lay-search >
	137	<option value="">选择边框样式</option>
	138	</select>
	139	</div>
	140	</div>
	141
	142	<div class="layui-form-item flex flex-row flex-jc-between">
	143	<label class="layui-form-label">边框颜色</label>
	144	<div class="layui-input-inline font-bg-color-input color-input">
	145	<select name="borderColor" lay-verify="required" lay-search lay-filter="color-input">
	146	<option value="">选择边框颜色</option>
	147	</select>
	148	</div>
	149	</div>
	150
	151
	152	<div class="css-result-container">
	153	<div class="css-result-title">结果</div>
	154	<div class="css-result">
	155	border-bottom-width: 3px;border-right-width: 3px;border-style: dashed;border-color: #DC143C;font-style: italic;background-color: #FF69B4;
	156	</div>
	157	</div>
	158
	159	</form>
	160
	161	<div class="layui-form-item">
	162	<!-- <button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>-->
	163	<button class="layui-btn layui-btn-fluid layui-btn-normal layui-btn-radius confirm-btn" lay-submit lay-filter="">确定</button>
	164	</div>
	165
	166	</div>
	167	</div>
	168
	169	</div>
	170
	171	</div>
	172	</div>
	173
	174
	175	<!--<script src="http://rf.onbus.cn/shopping/view/javascript/jquery/jquery-2.1.1.min.js"></script>-->
	176	<script src="/js/jquery1.8.3.min.js"></script>
	177	<script src="/general/textCssEdit/js/layui/layui.js" type="text/javascript"></script>
	178	<script src="/general/textCssEdit/js/config.js" type="text/javascript"></script>
	179	<script src="/general/textCssEdit/js/index.js" type="text/javascript"></script>
	180	<script src="/js/base64.js"></script>
	181	<script>
a61f53	182	let gridInfo = null;
a724cc	183	$(function () {
X	184
	185	// var editLayerIndex = '';
	186
	187	// Dom.openEditBtn.on('click', function () {
	188	// editLayerIndex = layer.open({
	189	// type: 1,
	190	// area: ['400px', '780px'],
	191	// closeBtn: 0,
	192	// isOutAnim: false,
	193	// title: false,
	194	// resize: false,
	195	// fixed: false,
	196	// shade: 0.6,
	197	// shadeClose: false, // 点击遮罩区域，关闭弹层,
	198	// content: $('.text-edit-container'),
	199	// move: false,
	200	// success: function (layero, index) {
	201	// createFormElement();
	202	// }
	203	//
	204	// });
	205	// });
a61f53	206	function clickToGrid(record) {//record是数组类型，选择返回的数据,根据外表定义而定，record=[12,'aa',56]
F	207	if (record == "") return;
a724cc	208	try {
a61f53	209	if (gridInfo) {
F	210	let gr = eval('(' + gridInfo + ')');//弹出的父页面传过来的信息
	211	let pa = parent.frames[gr.frameName].Grids[gr.gridID];//得到grid
	212	if (pa) {
	213	let row = pa.Rows[gr.rowIDp];//三点弹出的所在行
	214	pa.threePop("" + record, gr.id, row, 1, -1, null, null, gr.id);
	215	pa.EndEdit(0);
a724cc	216	}
X	217	}
	218	parent.getTextCssEdit({'close': true});//关闭弹窗
	219	} catch (e) {
	220	parent.getTextCssEdit({'close': true});//关闭弹窗
	221	}
	222	};
	223	// 点击确认按钮
	224	Dom.confirmBtn.on('click', function () {
	225	var resultList = [];
	226	var result = {};
	227	var form = $('.text-edit-container form');
	228	var formData = form.serializeArray();
	229	// console.log('formData',formData);
	230	for (let i = 0; i < formData.length; i++) {
	231	const item = formData[i];
	232	result[item.name] = item.value;
	233	}
	234	resultList.push(result);
a61f53	235	// console.log('数组格式的css样式', resultList);
F	236	//console.log('可以直接使用的css样式', Dom.cssResult.text());
a724cc	237	let type = getUrlParam("type");
X	238	if (type == 1) {//1是面板
	239	parent.getTextCssEdit({'close': true, 'value': Dom.cssResult.text(), 'type': type});//关闭弹窗
	240	} else {//处理格线回写值（type==0）
	241	clickToGrid([Dom.cssResult.text()]);
	242	}
	243	});
	244
	245
	246	// 请求颜色数据，并写入到Config配置中
	247	$.ajax({
	248	url: ' /app/v2/get9686.do',//http://192.168.100.111:9001
	249	type: 'GET',
	250	dataType: 'json',
	251	contentType: 'application/json',
	252	success: function (res) {
	253	// console.log('保存结果',res);
	254	var colorConfig = {};
	255	// 把请求的颜色配置保存到全局配置中
	256	res.data.map(function (item) {
	257	colorConfig[item.ColorName] = item.HexColorValue;
	258	});
a61f53	259	//console.log('colorConfig', colorConfig);
a724cc	260	Config.color = colorConfig;
X	261	Config.backgroundColor = colorConfig;
	262	Config.borderColor = colorConfig;
	263
	264	// layer.msg(res.msg);
	265	// getCssResultInit();
	266	Dom.cssResult.html(getUrlParam("cssText"));//赋值
a61f53	267	gridInfo = getUrlParam("grid");
a724cc	268	createFormElement();// 创建控制css样式的表单元素
X	269	}
	270	})
	271
	272	/**
	273	* 获取请求参数信息
	274	* @param name
	275	* @returns {null\|string}
	276	*/
	277	function getUrlParam(name) {
	278	var reg = new RegExp("(^\|&)" + name + "=([^&]*)(&\|$)"); //构造一个含有目标参数的正则表达式对象
	279	var r =base64decode(window.location.search.substr(1));//解码
	280	r = r.match(reg); //匹配目标参数
	281	if (r != null) {
	282	return unescape(r[2]);
	283	}
	284	return null; //返回参数值
	285	}
	286	});
	287	</script>
	288	</body>
	289	</html>