<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Cases_ADD.aspx.cs" Inherits="MyProject.Cases_ADD" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>编辑</title>
<link href="/JS/layui/css/layui.css" rel="stylesheet" />
<link rel="stylesheet" href="/layuiadmin/style/admin.css" />
<script src="/JS/jquery-3.4.1.js"></script>
<script src="/layuiadmin/layui/layui.js"></script>
<script src="/layuiadmin/lib/admin.js"></script>
<script src="/JS/layui/layui.js"></script>
<style>
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
.layui-input {
width: 200px;
}
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-card-body" style="padding: 15px;">
<div class="layui-form-item">
<label class="layui-form-label">案例名称</label>
<div class="layui-input-block">
<input type="text" id="names" lay-verify="names" autocomplete="off" placeholder="请输入案例名称" class="layui-input" value="<%=names %>" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">装修公司</label>
<div class="layui-input-block">
<div class="layui-form" >
<select name="" id="comID" lay-filter="">
<option value="0">请选择</option>
<%=sbCom.ToString() %>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">案例展示图</label>
<div class="layui-input-block">
<a href="javascript:;" class="file">选择文件<input type="file" name="" id="image" /></a>
<img src="<%=headIMG %>" id="image_show" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >面积</label>
<div class="layui-input-block">
<input type="text" id="mianJi" autocomplete="off" class="layui-input" value="<%=mianJi %>" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">预算</label>
<div class="layui-input-block">
<input type="text" id="yuSuan" autocomplete="off" class="layui-input" value="<%=yuSuan %>" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >户型</label>
<div class="layui-input-block">
<input type="text" id="huXing" autocomplete="off" class="layui-input" value="<%=huXing %>" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >
风格
</label>
<div class="layui-input-block">
<input type="text" id="fengGe" autocomplete="off" class="layui-input" value="<%=fengGe %>" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >装修方式</label>
<div class="layui-input-block">
<input type="text" id="fangShi" autocomplete="off" class="layui-input" value="<%=fangShi %>" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >详情</label>
<div class="layui-input-block">
<textarea id="txtaContent" style="display: none;"></textarea>
</div>
</div>
<div class="layui-form-item layui-layout-admin">
<div class="layui-input-block">
<div class="layui-footer" style="left: 0;">
<button class="layui-btn sim_btn">提交</button>
<input type="button" id="btnReset" class="layui-btn layui-btn-primary" value="重置" />
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="hdid" value="<%=strid %>" />
<input type="hidden" id="hdHeadIMG" value="<%=headIMG %>" />
<input type="hidden" id="hdcomID" value="<%=comID %>" />
<div id="hdContent" style="display:none;"><%=content %></div>
<script type="text/javascript">
//这里一定要设置全局变量,不然下面用的时候,未定义
var layer, form, laypage, laydate, upload, layedit, indexs;
$(function () {
layui.use(['index', 'layer', 'form', 'laypage', 'laydate', 'upload', 'jquery', 'layedit'], function () {
layer = layui.layer;
form = layui.form;
laypage = layui.laypage;
laydate = layui.laydate;
upload = layui.upload;
layedit = layui.layedit;//注册layedit
var $ = layui.jquery;
//layedit配置开始
//layedit.set一定要放在 layedit.build 前面,否则配置全局接口将无效。
layedit.set({
uploadImage: {
url: 'layeditUPIMG.ashx', //接口url
type: 'post' //默认post
}
});
indexs = layedit.build('txtaContent', {
height: 500, // 设置编辑器高度
});
//layedit配置结束
//layedit赋值开始
var strContent = $("#hdContent").html(); //这里用DIV来临时存值,是因为内容有图片,所以不能用hidden控件
if (strContent!="") {
layedit.setContent(indexs, strContent, false);//flag是true,是追加模式,flag是false,赋值模式
}
//layedit赋值结束
form.render('select');//先渲染select类型控件
form.on('select', function (data) {
$("#hdcomID").val(data.value);
});
});
//提交表单
$("body").on("click", ".sim_btn", function () {
saveData();
});
//清空文件框
$("body").on("click", "#btnReset", function () {
$(":input[type='text']").val("");
});
$("#image").change(function () {
var file = $("#image").get(0).files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
// 图片格式为 base64
$("#image_show").attr("src", e.target.result);
}
});
});
function saveData() {
var errorMsg = "";
var id = $("#hdid").val();
var names = $("#names").val();
var comID = $("#hdcomID").val();//存放装修公司ID
var imgurl = $("#image_show").attr("src");//案例展示图
if (imgurl.indexOf("data:image") == 0) {//如果有重新选择图片
//先调用后台转换图片
$.ajax({
type: "POST",
url: "/ASHX/SetImg.ashx",
async: false,
dataType: "JSON",
data: { 'action': 'ConvertIMG', 'imgurl': imgurl },
success: function (result) {
imgurl = result.Data;
}, complete: function (result) {
}
});
//先调用后台转换图片
} else {
imgurl = $("#hdHeadIMG").val();//如果没选择图片,就用隐藏域里的图
}
var mianJi = $("#mianJi").val();
var yuSuan = $("#yuSuan").val();
var huXing = $("#huXing").val();
var fengGe = $("#fengGe").val();
var fangShi = $("#fangShi").val();//装修方式
var content = layedit.getContent(indexs)//详情图文HTML//layedit取值
if (names == "") {
errorMsg = "请输入公司名称";
}
if (errorMsg != "") {
layer.msg(errorMsg, { icon: 7 });
return false;
}
loadIndex = layer.load(0);
var url = "Cases_ADD.aspx";
$.ajax({
type: "POST",
url: url,
dataType: "JSON",
data: { 'action': 'SaveData', 'id': id, 'names': names, 'comID': comID, 'imgurl': imgurl, 'mianJi': mianJi, 'yuSuan': yuSuan, 'huXing': huXing, 'fengGe': fengGe, 'fangShi': fangShi, 'content': encodeURI(content) },
success: function (result) {
if (result.State) {
layer.close(loadIndex);
layer.msg("操作成功", { time: 2000 });
setTimeout(closeRefresh, 2000);//关闭当前iframe,刷新指定iframe
}
else {
layer.msg(result.ErrorMsg, { time: 3000 });
}
}, complete: function (result) {
layer.close(loadIndex);
}
});
}
//关闭当前iframe,刷新指定iframe
function closeRefresh() {
parent.layui.index.openTabsPage("Cases_List.aspx", "列表");//先打开要跳转的iframe
parent.layui.admin.events.refresh();//刷新跳转后的iframe,调用母页面的刷新事件
parent.removeIframe("Cases_ADD.aspx");//调用母页面的方法,传当前页的标识
}
</script>
<script>
layui.config({
base: 'layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use('index');
</script>
</body>
</html>