软测单独项目
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

790 lines
31 KiB

11 months ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>信息编辑</title>
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../css/public.css" media="all" />
<script src="/js/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="/js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jq_extend.js"></script>
<style type="text/css">
.divPanelBody {
line-height: 55px;
}
.divPanelBody table tr td {
border: 1px dashed #42779D;
}
.divPanel {
position: relative;
border: 1px solid #42779D;
}
.close_btn {
position: absolute;
top: 0;
right: 0;
padding: 5px;
cursor: pointer;
}
.close_btn:hover {
background-color: #ddd;
}
.close_btn::before {
content: "×";
font-size: 20px;
}
.divTbParent {
position: relative;
line-height: 20px;
margin-top: 25px;
}
.divRowSpan {
position: absolute;
top: 30px;
left: 0px;
width: 90px;
}
.close_btn_tb {
position: absolute;
top: 0;
left: 0;
padding: 5px;
cursor: pointer;
}
.close_btn_tb:hover {
background-color: #ddd;
}
.close_btn_tb::before {
content: "×";
font-size: 20px;
}
.layui-form-checkbox[lay-skin=primary] span {
color: #fff;
}
</style>
</head>
<body>
<div id="divEdit" style="width:98%;">
<br />
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">名称</label>
<div class="layui-input-block">
<input type="text" id="DUTY_TEMPLATE_NAME" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">值班类型</label>
<div class="layui-input-block">
<select id="DUTY_TYPE_ID" lay-filter="DUTY_TYPE_ID">
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">识别设备</label>
<div class="layui-input-block">
<!--<input type="text" id="DeviceCode" autocomplete="off" class="layui-input">-->
<div id="DeviceCode"></div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="text" id="DUTY_SORT" lay-verify="required" autocomplete="off" placeholder="请输入排序" class="layui-input" value="1">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">新增信息</label>
<div class="layui-input-block">
<div class="layui-input-inline">
<a class="layui-btn layui-btn-normal layui-btn-fluid" id="btnAddAttri">新增属性</a>
</div>
<div class="layui-input-inline">
<select class="ipttycls" id="RowNum" lay-filter="RowNum" style="width:80px;">
<option value="1">一行</option>
<option value="2">两行</option>
<option value="3">三行</option>
<option value="4">四行</option>
<option value="5">五行</option>
<option value="6">六行</option>
<option value="7">七行</option>
<option value="8">八行</option>
<option value="9">九行</option>
<option value="10">十行</option>
<option value="11">十一行</option>
<option value="12">十二行</option>
</select>
</div>
<div class="layui-input-inline">
<select class="ipttycls" id="ColNum" lay-filter="ColNum" style="width:80px;">
<option value="1">一列</option>
<option value="2">两列</option>
</select>
</div>
<div class="layui-input-inline">
<a class="layui-btn layui-btn-normal layui-btn-fluid" id="btnAddTable">新增表格</a>
</div>
</div>
</div>
<!--新增属性外框-->
<div id="divAddAttri">
</div>
<!--新增表格外框-->
<div id="divAddTable">
</div>
<div class="layui-row">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" id="DUTY_REMARK"></textarea>
</div>
</div>
<div class="layui-form-item">
<center>
<button type="button" class="layui-btn" id="btn_Save">确定</button>
</center>
</div>
</form>
</div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<link rel="stylesheet" href="../../css/right-list.css" media="all" />
<link rel="stylesheet" href="../../css/bulletframebg.css" media="all" />
<script>
layui.extend({
selectM: '../../layui/layui_extends/selectM',
}).use(['laydate', 'layer', 'table', 'form', 'selectM'], function () {
var laydate = layui.laydate;
var table = layui.table;
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
var selectM = layui.selectM;
//var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
//var OrgId = userInfo.OrgID;
// var OrgId = getUrlParam("OrgId");// "D8DC637B8B984848A63F82A018AFAEB0";
var OrgId = "D8DC637B8B984848A63F82A018AFAEB0";
var cgid = getUrlParam('cgid');
//var cgid = "d55627eb15d8485b9a10ef6f057076d7";
//模板关联设备信息选择对象
var TemLinkDevice;
$(function () {
//获取传递机构ID
var paraOrgId = getUrlParam("OrgId");
if (paraOrgId.length > 1) {
OrgId = paraOrgId;
}
InitInfo();
//新增属性
$("#btnAddAttri").click(function () {
var attObj = {
ColNum: 0, DtmStr: "", ID: "", IsTable: 1, OptionList: "", RowTitle: "",
RowType: "0", RowVal: "", TableNum: 0, ColNumCount: 0, RowNumCount: 0
};
var htmlStr = '<div class="divPanel"><div class="close_btn"></div><div class="layui-row divPanelBody">' +
//GetAttHtml(1, 0, 0, 0, 0) +
GetAttHtml(attObj) +
'</div></div>';
$("#divAddAttri").append(htmlStr);
form.render('select');
addTimeClick();
});
//新增表格
$("#btnAddTable").click(function () {
//var htmlStr = $("#divAddTable").html();
//行数
var RowNum = $("#RowNum").val();
//列数
var ColNum = $("#ColNum").val();
var TableNum = guid();
var htmlStr = '<div class="divPanel"><div class="close_btn"></div><div class="divPanelBody">';
htmlStr += '<table style="width:100%;">';
//循环添加行
for (var i = 0; i < RowNum; i++) {
htmlStr += '<tr>';
//循环添加列
for (var j = 0; j < ColNum; j++) {
var rowspan = 1;
var CloseHtml = '';
if (j > 0) {
CloseHtml = '<div class="close_btn_tb"></div>' +
'<div class="divRowSpan">' +
' <select class="ipttycls" lay-filter="DutyTbRow">' +
' <option value="1">跨一行</option>' +
' <option value="2">跨二行</option>' +
' <option value="3">跨三行</option>' +
' <option value="4">跨四行</option>' +
' <option value="5">跨五行</option>' +
' <option value="6">跨六行</option>' +
' <option value="7">跨七行</option>' +
' <option value="8">跨八行</option>' +
' </select>' +
'</div>';
}
var attObj = {
ColNum: j + 1, DtmStr: "", ID: "", IsTable: 0, OptionList: "", RowTitle: "",
RowType: "0", RowVal: "", TableNum: TableNum, ColNumCount: ColNum, RowNumCount: RowNum
};
console.log(TableNum);
htmlStr += '<td rowspan="' + rowspan + '"><div class="divTbParent">' + CloseHtml +
'<div class="layui-row divPanelBody">' +
GetAttHtml(attObj) +
'</div>' +
'</div></td>';
}
htmlStr += '</tr>';
}
htmlStr += '</table>';
htmlStr += '</div></div>';
$("#divAddTable").append(htmlStr);
form.render('select');
addTimeClick();
});
});
//动态属性设定html字符串
function GetAttHtml(attObj) {
//第几列
var ColNum = attObj.ColNum;
//时间范围字符串
var DtmStr = attObj.DtmStr;
//信息ID
var uuidStr = attObj.ID;
if (uuidStr.length < 1) {
uuidStr = guid();
}
//是否表格属性:0、表格属性;1、单独属性
var IsTable = attObj.IsTable;
//选项
var OptionList = attObj.OptionList;
//标题
var RowTitle = attObj.RowTitle;
//类型
var RowType = attObj.RowType;
//值
var RowVal = attObj.RowVal;
//表格排序
var TableNum = attObj.TableNum;
//总列数
var ColNumCount = attObj.ColNumCount;
//总行数
var RowNumCount = attObj.RowNumCount;
//var uuidStr = guid();
var selHtmlStr = "";
var selShowHtml = "display:none;";
var timShowHtml = "display:none;";
//类型:0、输入项;1、选择项;2、人员选择;3、时间范围;
switch (RowType) {
case "0":
selHtmlStr =
'<option value="0" selected="selected" >输入项</option>' +
'<option value="1">选择项</option>' +
'<option value="2">人员选择</option>' +
'<option value="3">时间范围</option>';
break;
case "1":
selHtmlStr =
'<option value="0">输入项</option>' +
'<option value="1" selected="selected">选择项</option>' +
'<option value="2">人员选择</option>' +
'<option value="3">时间范围</option>';
selShowHtml = "";
break;
case "2":
selHtmlStr =
'<option value="0">输入项</option>' +
'<option value="1">选择项</option>' +
'<option value="2" selected="selected">人员选择</option>' +
'<option value="3">时间范围</option>';
break;
case "3":
selHtmlStr =
'<option value="0">输入项</option>' +
'<option value="1">选择项</option>' +
'<option value="2">人员选择</option>' +
'<option value="3" selected="selected">时间范围</option>';
timShowHtml = "";
break;
default:
selHtmlStr =
'<option value="0" selected="selected">输入项</option>' +
'<option value="1">选择项</option>' +
'<option value="2">人员选择</option>' +
'<option value="3">时间范围</option>';
break;
}
var retHtml = '' +
'<div class="layui-input-inline">' +
' <label class="layui-form-label label-required-next" > 标题</label >' +
' <div class="layui-input-block">' +
' <input id="' + uuidStr + '_title" type="text" class="layui-input clsIptTitle" placeholder="请输入标题" value="' + RowTitle + '" lay-verify="required" maxlength="50" />' +
' </div>' +
'</div >' +
'<div class="layui-input-inline">' +
' <label class="layui-form-label">类型</label>' +
' <div class="layui-input-block">' +
' <select class="selItem" IsTable="' + IsTable + '" TableNum="' + TableNum + '" ColNum="' + ColNum +
'" ColNumCount="' + ColNumCount + '" RowNumCount="' + RowNumCount + '" lay-filter="DutyIptType" id="' + uuidStr + '">' +
selHtmlStr +
' </select>' +
' </div>' +
'</div>' +
'<div class="layui-input-inline" style="' + selShowHtml + '" id="' + uuidStr + '_div_Sel" >' +
' <label class="layui-form-label label-required-next" >选择项</label >' +
' <div class="layui-input-block">' +
' <input id="' + uuidStr + '_IptSel" type="text" class="layui-input" placeholder="多项用逗号分割" value="' + OptionList + '" maxlength="50" />' +
' </div>' +
'</div>' +
'<div class="layui-input-inline" style="' + timShowHtml + '" id="' + uuidStr + '_div_Time" >' +
' <label class="layui-form-label label-required-next" >时间段</label >' +
' <div class="layui-input-block">' +
' <input id="' + uuidStr + '_IptTimeRange" type="text" class="layui-input iptTimeRange" placeholder="请确认时间段" value="' + DtmStr + '" />' +
' </div>' +
'</div>'
return retHtml;
}
//类型切换
form.on("select(DutyIptType)", function (data) {
//类型:0、输入项;1、选择项;2、人员选择;3、时间范围;
var RowType = data.value;
var idStr = data.elem.id;
switch (RowType) {
//输入项
case "0":
$("#" + idStr + "_div_Sel").hide();
$("#" + idStr + "_div_Time").hide();
break;
//选择项
case "1":
$("#" + idStr + "_div_Sel").show();
$("#" + idStr + "_div_Time").hide();
break;
//人员选择
case "2":
$("#" + idStr + "_div_Sel").hide();
$("#" + idStr + "_div_Time").hide();
break;
//时间范围
case "3":
$("#" + idStr + "_div_Sel").hide();
$("#" + idStr + "_div_Time").show();
break;
}
});
//跨行切换
form.on("select(DutyTbRow)", function (data) {
//console.log($(this).parent().parent().parent().html());
$(this).parent().parent().parent().parent().parent().attr("rowspan", data.value);
});
//点击新增标签右上角删除事件
$(document).on('click', '.close_btn', function () {
$(this).parent().remove();
})
//点击新增标签表格左上角删除事件
$(document).on('click', '.close_btn_tb', function () {
$(this).parent().remove();
})
function addTimeClick() {
//点击新增属性中时间范围选择
$(document).on('click', '.iptTimeRange', function () {
//var idStr = $(this).attr("id");
//时间范围
laydate.render({
elem: this
, type: 'time'
, range: true
});
});
}
var arrTempLinkDeviceVal = [];
var selTempTypeId = '';
function InitInfo() {
if (cgid.length > 0) {
$.ajax({
type: "post",
url: "/ashx/DutyDiyHandler.ashx",
data: { Action: "GetDutyTemplateByID", cgid: cgid },
dataType: "json",
success: function (result) {
console.log(result);
//模板名称
$("#DUTY_TEMPLATE_NAME").val(result.data.DUTY_TEMPLATE_NAME);
selTempTypeId = result.data.DUTY_TYPE_ID;
arrTempLinkDeviceVal = result.data.DEVICECODE.split(",");
$("#DUTY_SORT").val(result.data.DUTY_SORT);
$("#DUTY_REMARK").val(result.data.DUTY_REMARK);
//遍历添加属性
for (var i = 0; i < result.data.dataAttribList.length; i++) {
var htmlStr = '<div class="divPanel"><div class="close_btn"></div><div class="layui-row divPanelBody">' +
GetAttHtml(result.data.dataAttribList[i]) +
'</div></div>';
$("#divAddAttri").append(htmlStr);
form.render('select');
addTimeClick();
}
//遍历添加表格
for (var k = 0; k < result.data.dataTableList.length; k++) {
var htmlStr = '<div class="divPanel"><div class="close_btn"></div><div class="divPanelBody">';
htmlStr += '<table style="width:100%;">';
htmlStr += '<tr>';
for (var i = 0; i < result.data.dataTableList[k].dataAttribList.length; i++) {
var rowspan = result.data.dataTableList[k].dataAttribList[i].RowSpan;
var CloseHtml = '';
//判断当前是否第二列
if (result.data.dataTableList[k].dataAttribList[i].ColNum == "2") {
//是第二列
CloseHtml = '<div class="close_btn_tb"></div>' +
'<div class="divRowSpan">' +
' <select class="ipttycls" lay-filter="DutyTbRow">' +
' <option value="1">跨一行</option>' +
' <option value="2">跨二行</option>' +
' <option value="3">跨三行</option>' +
' <option value="4">跨四行</option>' +
' <option value="5">跨五行</option>' +
' <option value="6">跨六行</option>' +
' <option value="7">跨七行</option>' +
' <option value="8">跨八行</option>' +
' </select>' +
'</div>';
}
htmlStr += '<td rowspan="' + rowspan + '"><div class="divTbParent">' + CloseHtml +
'<div class="layui-row divPanelBody">' +
GetAttHtml(result.data.dataTableList[k].dataAttribList[i]) +
'</div>' +
'</div></td>';
//判断是否还有下一条数据
if (i + 1 < result.data.dataTableList[k].dataAttribList.length) {
//存在下一条数据,判断下一条是否第一列
if (result.data.dataTableList[k].dataAttribList[i + 1].ColNum == "1") {
//下一条是第一列
htmlStr += '</tr><tr>';
}
}
}
htmlStr += '</tr>';
htmlStr += '</table>';
htmlStr += '</div></div>';
$("#divAddTable").append(htmlStr);
form.render('select');
addTimeClick();
}
InitTempLinkDevice();
InitTempLinkType();
}
});
} else {
InitTempLinkDevice();
InitTempLinkType();
}
}
//模板管理设备信息初始化
function InitTempLinkDevice() {
$.ajax({
type: "post",
url: "/ashx/DutyDiyHandler.ashx",
data: { Action: "GetDutyTemLinkDeviceList", OrgId: OrgId },
dataType: "json",
success: function (result) {
console.log('设备');
console.log(result);
TemLinkDevice = selectM({
elem: '#DeviceCode'
, data: result.data
, selected: arrTempLinkDeviceVal
, max: 5
//, verify: 'required'
, delimiter: ','
, field: { idName: 'DIC_VALUE', titleName: 'DIC_TITLE' }
});
}
});
}
//模板管理类型信息初始化
function InitTempLinkType() {
$.ajax({
type: "post",
url: "/ashx/DutyDiyHandler.ashx",
data: { Action: "GetDutyTypeList", OrgId: OrgId },
dataType: "json",
success: function (result) {
//console.log(result);
var orgStr = "";
result.data.forEach(function (obj, index, arr) {
if (selTempTypeId == obj.ID) {
orgStr += "<option value='" + obj.ID + "' selected='selected' >" + obj.DUTY_TYPE_NAME + "</option>";
} else {
orgStr += "<option value='" + obj.ID + "'>" + obj.DUTY_TYPE_NAME + "</option>";
}
});
$("#DUTY_TYPE_ID").append(orgStr);
form.render('select');
}
});
}
//信息保存
$("#btn_Save").click(function () {
//熟悉信息集合
var attList = [];
//遍历所有属性
$(".selItem").each(function () {
//id字符串
var idStr = $(this).attr("id");
//属性ID
var ID = idStr;
//标题
var RowTitle = $("#" + idStr + "_title").val();
//类型:0、输入项;1、选择项;2、人员选择;3、时间范围;
var RowType = $(this).val();
//第几列
var ColNum = $(this).attr("ColNum");
//时间段字符串
var DtmStr = $("#" + idStr + "_IptTimeRange").val();
//选项集合
var OptionList = $("#" + idStr + "_IptSel").val();
//是否表格属性:0、表格属性;1、单独属性
var IsTable = $(this).attr("IsTable");
//跨行数
var RowSpan = 0;
//判断是否表格
if (IsTable == "0") {
//判断是否第二列
if (ColNum == "2") {
RowSpan = $(this).parent().parent().parent().parent().parent().attr("rowspan");
} else {
RowSpan = 1;
}
}
//表格排序
var TableNum = $(this).attr("TableNum");
//表格总行数
var RowNumCount = $(this).attr("RowNumCount");
//表格总列数
var ColNumCount = $(this).attr("ColNumCount");
attList.push({
ID: idStr, RowTitle: RowTitle, RowType: RowType, ColNum: ColNum, DtmStr: DtmStr, OptionList: OptionList
, IsTable: IsTable, TableNum: TableNum, RowSpan: RowSpan, RowNumCount: RowNumCount, ColNumCount: ColNumCount
});
});
//排序
var DUTY_SORT = $("#DUTY_SORT").val();
//模板名称
var DUTY_TEMPLATE_NAME = $("#DUTY_TEMPLATE_NAME").val();
//备注信息
var DUTY_REMARK = $("#DUTY_REMARK").val();
//设备ID
var DEVICECODE = TemLinkDevice.values.join(',');
//值班类型ID
var DUTY_TYPE_ID = $("#DUTY_TYPE_ID").val();
var attObj = {
DUTY_SORT: DUTY_SORT, ORG_ID: OrgId, DUTY_TEMPLATE_NAME: DUTY_TEMPLATE_NAME, DUTY_REMARK: DUTY_REMARK
, DEVICECODE: DEVICECODE, DUTY_TYPE_ID: DUTY_TYPE_ID, attList: attList
};
var dataStr = JSON.stringify(attObj);
$.ajax({
type: "post",
url: "/ashx/DutyDiyHandler.ashx",
data: {
Action: "SaveDutyTemplate"
//分组信息ID
, did: cgid
//信息内容JSON字符串
, dataStr: dataStr
},
dataType: "json",
success: function (result) {
//console.log(result);
if (result.code == 1) {
top.layer.msg(result.msg, { time: 1800 });
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
} else {
layer.open({
title: '信息提示'
, content: result.msg
});
}
}
});
});
});
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return ''; //返回参数值
}
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
</script>
</body>
</html>