@{
    CurrentUser user = ViewBag.CurrentUser;
    string action = ViewContext.RouteData.Values["action"].ToString();
    IEnumerable<dynamic> fieldData = Html.GetFieldList((string)ViewBag.Table, action, user, PageAdmin.Common.FromEnum.Member);
    string guid = Html.Guid();
}
<style>
   .avatar-box .el-upload--picture-card,.avatar-box .el-upload-list--picture-card .el-upload-list__item{width:80px;height:80px;line-height:80px;border-radius:40px}
   .avatar-box .el-upload--picture-card i{font-size:16px}
   .avatar-box .el-upload-list--picture-card .el-upload-list__item-thumbnail { width: 100px;height: 100px;}
   .avatar-box .el-dialog{width:300px;height:300px;max-width:100%;max-height:100%}
   .avatar-box .el-dialog a img{max-height:220px!important}
   .avatar-box .el-upload-list__item.is-success .el-upload-list__item-status-label{display:none}
</style>
<div class="main" id="main" v-cloak>
    <el-form ref="form" label-width="130px" label-position="left" data-source="@Model" style="max-width:1000px" size="medium" >
        <!--解决浏览器自动填充账户-->
        <input type="text" style="position:fixed;bottom:-9999px" />
        <input type="password" style="position:fixed;bottom:-9999px" />
        <el-form-item label="用户名*">
            <el-input v-model.trim="formData.Username" placeholder="长度控制在4-16字符之间,中文占两个字符" 
                      v-validate="{data:formData.Username,dataType:'username',getLengthByByte:true,maxLength:4,maxLength:16,nullMsg:'请填写用户名!',errorMsg:'用户名控制在4-16字符之间，且只能是数字、字母、下划线或中文字符组成!'}" maxlength="16"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="密码*">
            <el-input v-model.trim="formData.Password" type="password" placeholder="长度控制在6-20字符之间" 
                      v-validate="{data:formData.Password,dataType:'password',nullMsg:'请填写密码!',errorMsg:'密码长度控制在6到20位字符之间！'}" maxlength="20"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="昵称">
            <el-input type="text" v-model="formData.NickName"  maxlength="16" v-validate="{data:formData.NickName,dataType:'*',getLengthByByte:true,minLength:4,maxLength:16,nullMsg:'请填写昵称',ignoreEmpty:true}"></el-input>
            <span class="help-block">长度控制在4-16个字符之间</span>
        </el-form-item>
        <el-form-item label="头像" class="avatar-box">
            <ui-picture-upload action="/e/uploadApi/" v-model="formData.Avatar" :file-list="avatarOptions" return-type="string" :limit="1" :max-size="2048" list-type="picture-card" accept=".jpg,.jpeg,.gif,.png" :data="{tableName:'pa_member',fieldName:'Avatar',detailId:0,fileType:'image',watermark:'false',thumbnail:'true',thumbnailWidth:'300',thumbnailHeight:'300'}">
                <i class="el-icon-plus"></i>
            </ui-picture-upload>
            <span class="help-block"></span>
        </el-form-item>
        <el-form-item label="用户组">
            <ui-select v-model="formData.MemberGroupId" placeholder="选择用户组" :multiple="false" :clearable="false" v-bind:options="@Html.GetCanAdminMemberGroupOptions()" v-validate="{data:formData.MemberGroupId,dataType:'numeric',min:1,errorMsg:'请选择用户组！',nullMsg:'请选择用户组!'}"></ui-select>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="所属部门">
            <ui-cascader v-model="formData.DepartmentId" :options="@Html.GetTreeOptionsJson("pa_department","name","","xuhao asc")" style="width:100%;"></ui-cascader>
            <span class="help-block validate-tips-box">无部门默认不选择</span>
        </el-form-item>

        <el-form-item label="邮箱">
            <el-input v-model="formData.Email" v-validate="{data:formData.Email,dataType:'email',ignoreEmpty:true,nullMsg:'请填写邮箱！',errorMsg:'邮箱格式错误！'}" maxlength="50"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        <el-form-item label="手机号">
            <el-input v-model="formData.Mobile" v-validate="{data:formData.Mobile,dataType:'mobile',ignoreEmpty:true,nullMsg:'请填写手机号！',errorMsg:'手机号码格式错误！'}" maxlength="50"></el-input>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>
        @{
            string beforeSubmitJs = "";
            var data = new ViewDataDictionary();
            data.Add("from", PageAdmin.Common.FromEnum.Member);
            data.Add("guid", guid);
            data.Add("currentUser", ViewBag.CurrentUser);
            data.Add("memberGroupId", ViewBag.MemberGroupId);
            data.Add("fieldPrefix", "formData");
            data.Add("i", 0);
            int i = 0;
            if (fieldData != null)
            {
                foreach (var row in fieldData)
                {
                    data["i"] = i;
                    beforeSubmitJs += row.BeforeSubmitJs;
                    Html.RenderPartial("~/Areas/E/Views/CustomForm/FormPartial.cshtml", (object)row, data);
                    i++;
                }
            }

        }
    </el-form>
    <div class="footer-submit-bar" style="padding-left:150px">
        <el-button type="primary" v-on:click="postSubmit">提交保存</el-button>
        <el-button onclick="closeSelf()">关闭</el-button>
        <el-button onclick="closeSelf(parent.loadData)">返回</el-button>
    </div>
</div>
<script src="~/Incs/UEditor/ueditor.forAdmin.config.js" type="text/javascript"></script>
<script src="~/Incs/UEditor/ueditor.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var id = "@Request.QueryString["id"]";
    var formData = @Html.RawModel((string)Model);
        formData.Guid = "@guid";
        formData.State = 1;
        formData.Logins = 0;
        formData.IsAdmin = 0;
        formData.MemberGroupId =0;
         //注册树组件
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            avatarOptions:[],
            formData: formData,
        },
        created: function () {
            var avatar = this.formData.Avatar;
            if (!isNullOrEmpty(avatar)) {
                this.avatarOptions.push({ name: "", url: avatar, thumbnail: avatar });
            }
        },
        methods: {
            postSubmit: function () {
                var validated = this.validateForm({ beforeSubmit: function () { return BeforeSubmit() }});//jquery表单验证
                if (validated) {
                    this.submit({ url: "@Url.ActionUrl()", data: formData, success: function () { postBack() } });
                }
            }
        },
    });
    function BeforeSubmit()
    {
        @Html.Raw(beforeSubmitJs)
        return true;
    }
    function postBack() {
        if (id == "") {
            location.href = location.href
        }
    }
</script>