MESProductionWeb/Central.Control.WebPage/Areas/SysManage/Views/Packing/Detail.cshtml

@using MES.Production.Service;
@using Central.Control.Domain;
@using Ant.Service.Common;
@using CommonToolHelper;
@{
    ViewBag.Title = "添加/修改包装";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model  MES.Production.Entity.Entity.YW_Packing

<style>
    body {
        background-color: white;
    }

    .changeicon {
        float: right;
        margin-right: 22px;
        position: absolute;
        right: -7px;
        top: 0px;
        border: none;
        background-color: #18a689;
        color: #FFFFFF;
        line-height: 33px;
        height: 33px;
    }
</style>
<link href="~/Content/uploadone/CSS/webuploader.css" rel="stylesheet" />
<link href="~/Content/uploadone/CSS/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/uploadone/CSS/uploadstyle.css" rel="stylesheet" />
<link href="~/Content/uploadone/CSS/font-awesome.css" rel="stylesheet" />
<script src="~/Content/uploadone/Script/webuploader.js"></script>
@using (Ajax.BeginForm("Save", null, new AjaxOptions()
{
    HttpMethod = "Post",
    OnBegin = "SubAjax.Loading",
    OnComplete = "SubAjax.Complate",
    OnFailure = "SubAjax.Failure",
    OnSuccess = "SubAjax.Success"
},
new { @class = "form-horizontal dig-from", @role = "form" }))
{
    <div class="wrapper-content">
        <div class="panel-body">
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    @Html.HiddenFor(p => p.Id)
                    <div class="form-group fileUpload">
                        @Html.Hidden("hidfilename", Model.Img, new { @class = "hidfilename" })
                        @Html.Hidden("hidfileid", Model.Img, new { @class = "hidfileid" })
                        <label class="col-lg-3 control-label">包装图片：</label>
                        <div class="col-lg-8">
                            <div class="fileNameList">
                            </div>
                            <div class="cp_img_jia fileNamePicker"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">包装名称：</label>
                        <div class="col-lg-8">
                            @Html.TextBoxFor(p => p.Name, new { @class = "form-control", @id = "Name", @placeholder = "请输入包装名称", @datatype = "*", @nullmsg = "请输入包装名称！", @errormsg = "请输入包装名称！" })
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">最小容量：</label>
                        <div class="col-lg-8">
                            @Html.TextBoxFor(p => p.Min, new { @class = "form-control", @id = "Min", @placeholder = "请输入最小容量", @type = "number", @nullmsg = "请输入最小容量！", @errormsg = "请输入最小容量！" })
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">最大容量：</label>
                        <div class="col-lg-8">
                            @Html.TextBoxFor(p => p.Max, new { @class = "form-control", @id = "Max", @placeholder = "请输入最大容量", @type = "number", @nullmsg = "请输入最大容量！", @errormsg = "请输入最大容量！" })
                        </div>
                    </div>
                    <div class="hr-line-dashed">
                        <div class="form-group m20" style="text-align:center">
                            <div class="col-sm-2 col-sm-offset-2">
                                <button class="btn btn-primary btn-save" type="submit"><i class="fa fa-check"></i> <span>确定保存</span></button>
                                <button class="btn btn-warning" id="btn-dig-close" type="button"><i class="im-undo2"></i> 取消返回</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
@section scripts{

    <script type="text/javascript">
        $.fn.extend(
            {
                FileUpload: function (options) {
                    $(this).each(function () {
                        var filename = $(this).find(".hidfilename").val();
                        if (filename != null && filename != "") {
                            var headstr = "<div id=\"WU_FILE_0\" class=\"cpup_img upload-state-done\"><img src=\"";
                            var footstr = "\"><div class=\"upcp_img_jian\"></div><p class=\"progress hide\"><span style=\"width: 100%;\"></span></p></div>";
                            $(this).find(".fileNameList").html(headstr + filename + footstr);
                        }

                        options = options || {};

                        var applicationPath = "http://" + window.location.host;

                        var fileId;

                        var $list = $(this).find('.fileNameList');

                        var _this = this;

                        var ratio = window.devicePixelRatio || 1;

                        var defaultOptions = {
                            thumbnailWidth: 90 * ratio,
                            thumbnailHeight: 90 * ratio,
                            auto: true,
                            disableGlobalDnd: true,
                            swf: applicationPath + '/Script/Uploader.swf',
                            server: applicationPath + '/Sys/Home/UpLoadProcess',
                            pick: $(_this).find(".fileNamePicker"),
                            accept: {
                                title: 'Images',
                                extensions: 'gif,jpg,jpeg,bmp,png',
                                mimeTypes: 'image/*'
                            },
                            fileNumLimit: 1

                        };
                        options = $.extend(options, defaultOptions);

                        var uploader = WebUploader.create(options);

                        // 当有文件添加进来的时候
                        uploader.on('fileQueued', function (file) {
                            debugger;
                            var $li = $(
                                '<div id="' + file.id + '" class="cpup_img">' +
                                '<img class="jjgimg">' +
                                '<div class="upcp_img_jian"></div></div>'
                            );

                            var $img = $li.find('img');

                            $list.children().remove();//先清空元素内容
                            if (fileId != file.id && fileId != null) {
                                uploader.removeFile(uploader.getFile(fileId, true));
                            }

                            fileId = file.id;

                            $list.append($li);

                            // 创建缩略图
                            // 如果为非图片文件，可以不用调用此方法。
                            // thumbnailWidth x thumbnailHeight 为 100 x 100
                            uploader.makeThumb(file, function (error, src) {
                                if (error) {
                                    $img.replaceWith('<span>不能预览</span>');
                                    return;
                                }
                                $img.attr('src', src);
                            }, options.thumbnailWidth, options.thumbnailHeight);
                        });

                        //上传压缩宽度
                        uploader.option('compress', {
                            width: 700
                        });

                        // 文件上传过程中创建进度条实时显示。
                        uploader.on('uploadProgress', function (file, percentage) {
                            var $li = $(_this).find('#' + file.id),
                                $percent = $li.find('.progress span');

                            // 避免重复创建
                            if (!$percent.length) {
                                $percent = $('<p class="progress"><span></span></p>')
                                    .appendTo($li)
                                    .find('span');
                            }

                            $percent.css('width', percentage * 100 + '%');
                        });
                        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                        uploader.on('uploadSuccess', function (file, response) {
                            debugger;
                            var imgurl = response.filePath; //上传图片的路径
                            var fileid = response.fileid; //上传图片的路径
                            $(_this).find('#' + file.id).addClass('upload-state-done');
                            $(_this).find(".hidfilename").val(imgurl);
                            $(_this).find(".jjgimg").attr('src', imgurl);//季健国加为了解决保存一串字符串
                            $(_this).find(".hidfileid").val(fileid);
                        });

                        // 文件上传失败，显示上传出错。
                        uploader.on('uploadError', function (file) {
                            var $li = $(_this).find('#' + file.id),
                                $error = $li.find('div.error');

                            // 避免重复创建
                            if (!$error.length) {
                                $error = $('<div class="error"></div>').appendTo($li);
                            }

                            $error.text('上传失败');
                        });

                        // 完成上传完了，成功或者失败，先删除进度条。
                        uploader.on('uploadComplete', function (file) {
                            $(_this).find('#' + file.id).find('.progress').remove();
                        });

                        //所有文件上传完毕
                        uploader.on("uploadFinished", function () {
                            //提交表单

                        });

                        //开始上传
                        $(this).find("#ctlUpBtn").click(function () {
                            uploader.upload();

                        });

                        //显示删除按钮
                        $(this).find(".cpup_img").on("mouseover", function () {
                            $(this).children(".upcp_img_jian").css('display', 'block');

                        });
                        //隐藏删除按钮
                        $(this).find(".cpup_img").on("mouseout", function () {
                            $(this).children(".upcp_img_jian").css('display', 'none');

                        });
                        //执行删除方法
                        $list.on("click", ".upcp_img_jian", function () {
                            debugger;
                            var Id = $(this).parent().attr("id");
                            try {
                                $(_this).find(".hidfilename").val("");
                                $(_this).find(".hidfileid").val("");
                                uploader.removeFile(uploader.getFile(Id, true));
                            }
                            catch (ex) { }

                            $(this).parent().remove();
                        });
                    });
                }
            }
        );


        $(function () {
            $(".fileUpload").FileUpload();
            $('.form-horizontal').initValidform();

            $('.select2').select2();
        });

    </script>

}