编辑用户>更新头像

css/model/sys/user.css

@@ -7,16 +7,16 @@
    width: 35px;
}
.sys_user_new,.sys_user_role,.sys_user_right,.sys_user_menu {
.sys_user_new,.sys_user_role,.sys_user_right,.sys_user_menu,.sys_user_edit {
    width: 800px;
    padding: 0 20px 10px;
}
.sys_user_new .newForm {
.sys_user_new .newForm,.sys_user_edit .newForm {
    position: relative;
}
.sys_user_new .newForm .head-ctn {
.sys_user_new .newForm .head-ctn,.sys_user_edit .newForm .head-ctn {
    position: absolute;
    top: 3px;
    right: 30px;
@@ -24,7 +24,7 @@
    height: 190px;
}
.sys_user_new .newForm .head-ctn .upload-btn {
.sys_user_new .newForm .head-ctn .upload-btn,.sys_user_edit .newForm .head-ctn .upload-btn {
    position: absolute;
    bottom: 10px;
    left: 40px;
@@ -37,21 +37,21 @@
    padding-top: 6px;
}
.sys_user_new .newForm .head-ctn .upload-btn i {
.sys_user_new .newForm .head-ctn .upload-btn i,.sys_user_edit .newForm .head-ctn .upload-btn i {
    font-size: 16px;
    color: rgb(95,184,120);
}
.sys_user_new .newForm .head-ctn img {
.sys_user_new .newForm .head-ctn img,.sys_user_edit .newForm .head-ctn img {
    width: 100%;
   height: 100%;
}
.sys_user_new .upload-item{
.sys_user_new .upload-item,.sys_user_edit .upload-item{
	position: absolute;
	width: 100%;
	top:50%;
	transform: translateY(-50%);
}
.sys_user_new .upload-item .progress{
.sys_user_new .upload-item .progress,.sys_user_edit .upload-item .progress{
	width: 1px;
	height: 30px;
	background-color: #3280FC;
@@ -59,7 +59,5 @@
.sys_user_menu .nav ul{
	padding-left: 20px;
}
.sys_user_edit{
    width:800px;
}

html/model/sys/user/edit.html

@@ -1,41 +1,44 @@
<div class="sys_user_edit centerModal">
	<div class="modal-ctrl">
		<i class="icon icon-times"></i>
	</div>
	<div class="container newForm">
		<div class="row">
			<div class="col-2 item-caption">用户NAME</div>
			<div class="col-10">
				<div class="form-item text" defVal="" name="name"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-2 item-caption">电话</div>
			<div class="col-10">
				<div class="form-item text" defVal="" name="mobile"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-2 item-caption">邮箱</div>
			<div class="col-10">
				<div class="form-item text" defVal="" name="email"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-2 item-caption">备注</div>
			<div class="col-10">
				<div class="form-item textarea" defVal="" name="descp"></div>
			</div>
		</div>
		<div class="row">
			<div class="col-10"></div>
			<div class="col-2">
				<div class="btn pull-right opt-save">
					<i class="icon-check"></i> SAVE
				</div>
			</div>
		</div>
	</div>
    <div class="modal-ctrl">
        <i class="icon icon-times"></i>
    </div>
    <div class="container newForm">
        <div class="row">
            <div class="col-2 item-caption">用户姓名</div>
            <div class="col-6">
                <div class="form-item text" defVal="" name="name"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-2 item-caption">电话</div>
            <div class="col-6">
                <div class="form-item text" defVal="" name="mobile"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-2 item-caption">邮箱</div>
            <div class="col-6">
                <div class="form-item text" defVal="" name="email"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-2 item-caption">备注</div>
            <div class="col-6">
                <div class="form-item textarea" defVal="" name="descp"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-10"></div>
            <div class="col-2">
                <div class="btn pull-right opt-save">
                    <i class="icon-check"></i> SAVE
                </div>
            </div>
        </div>
        <div class="head-ctn">
            <div class="upload-btn">
                <i class="icon icon-upload"></i>&nbsp;上传新头像
            </div>
        </div>
    </div>
</div>

js/model/sys/user/edit.js

@@ -1,25 +1,62 @@
;
spa_define(function(spa) {
	return {
		modal: function(data) {
			var modalCtn = spa.getLastModalCtn();
			var root = modalCtn = modalCtn.children();
			var form = root.find(".newForm").form();
			root.find(".modal-ctrl .icon-times").on("click", function() {
				spa.closeModal();
			});
			var handler = data.hand;
			var closeThis = function() {
				spa.closeModal();
				if(handler) {
					handler();
				}
			};
			form.val(data.data);
			root.find(".opt-save").on("click", function() {
				form.doPut("../ajax/sys/user", closeThis, {});
			});
		}
	};
spa_define(function() {
	return $.use(["spa","util","form","upload"],function (spa,util,fb,upload) {
        return {
            modal: function(data) {
                var root = spa.findInModal(".sys_user_edit");
                var form = fb.build(root.find(".newForm"));
                var saveBtn = root.find(".opt-save"),
                    headArea = root.find(".head-ctn"),
                    save = function () {
                        form.doPut("../ajax/sys/user", closeThis, {});
                    };
                root.find(".modal-ctrl .icon-times").on("click", function() {
                    spa.closeModal();
                });
                var handler = data.hand;
                var closeThis = function() {
                    spa.closeModal();
                    if(handler) {
                        handler();
                    }
                };
                form.val(data.data);
                upload.build({
                    render: root.find(".upload-btn"),
                    accept: "image/gif, image/jpeg",
                    fail: function(errType, errData) {
						/*this ={id,name,size,type,abort=function}*/
                        util.errMsg(this.name + "上传文件错误：" + errType);
                        this.ele.remove();
                        saveBtn.on("click", save);
                    },
                    async: false,
                    maxSize: 1024 * 1024 * 10,
                    done: function(data) {
						/*this ={id,name,size,type,abort=function}*/
                        this.ele.remove();
                        headArea.find("img").remove();
                        $("<img></img>").attr("src", "../data/" + data.uri).appendTo(headArea);
                        form.val({"head":data.uri});
                        saveBtn.on("click", save);
                    },
                    start: function() {
						/*this ={id,name,size,type,abort=function}*/
                        this.ele = $("<div class='upload-item'><div class='progress'></div><span>" + this.name + "</span><div>");
                        this.ele.appendTo(headArea);
                        this.progress = this.ele.find(".progress");
                        saveBtn.off("click");
                    },
                    notity: function(total, loaded) {
						/*this ={id,name,size,type,abort=function}*/
                        var vv =  ""+Math.ceil(loaded * 100 / total) + "%;"
                        this.progress.attr("style", "width:" +vv);
                        this.progress.text(vv);
                    },
                    uri: "../ajax/sys/user/head"
                });
                saveBtn.on("click", save);
            }
        };
    })
});