@{
    CurrentUser user = ViewBag.CurrentUser;
    int id =StringHelper.Format<int>(Request.QueryString["id"]);
    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>
    .el-button [class*="fa"] + span {
        margin-left: 5px;
    }
   .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>
    <div style="padding-bottom:15px;margin-left:10px;line-height:40px"><b>基本信息</b></div>
    <el-form ref="form" label-width="150px" label-position="left" size="medium">
        <el-row>
            <el-col :span="12">
                <el-form-item label="用户名">
                    <el-input v-model.trim="formData.Username" disabled style="max-width:500px;" maxlength="18">
                        <el-button slot="append" icon="el-icon-user-solid" v-on:click="goMember" >用户中心</el-button>
                    </el-input>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="注册时间">
                    <el-input v-model="formData.RegDate" disabled style="max-width:500px;" maxlength="18"></el-input>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="密码">
                    <el-input v-model.trim="formData.Password" style="max-width:500px;" maxlength="20" placeholder="不修改密码则留空" v-validate="{data:formData.Password,dataType:'password',ignoreEmpty:true,errorMsg:'密码长度控制在6到20位字符之间！'}">
                        <el-button slot="append" icon="el-icon-edit-outline" v-on:click="updatePassword">更新密码</el-button>
                    </el-input>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="注册IP">
                    <el-input v-model="formData.RegIp" disabled style="max-width:500px;" maxlength="18"></el-input>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="用户组">
                    <div style="max-width:500px;white-space:nowrap;display:flex;">
                        <ui-select v-model="formData.MemberGroupId" :multiple="false" :clearable="false" style="flex-grow:1" v-bind:options="@Html.GetCanAdminMemberGroupOptions()"></ui-select>
                        <el-button type="primary" size="medium" icon="el-icon-edit-outline" v-on:click="update" style="background-color:#f5f7fa;height:36px;color:#909399;border:1px solid #DCDFE6;margin-left:-8px;z-index:3;position:relative;border-bottom-left-radius:0px;border-top-left-radius:0px;">
                            更新组别
                        </el-button>
                    </div>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="最后登录时间">
                    <el-input v-model="formData.LastDate" disabled style="max-width:500px;"></el-input>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="部门">
                    <div style="max-width:500px;white-space:nowrap;display:flex;">
                        <ui-cascader v-model="formData.DepartmentId" style="flex-grow:1" :options="@Html.GetTreeOptionsJson("pa_department","name","","xuhao asc")"></ui-cascader>
                        <el-button type="primary" size="medium" icon="el-icon-edit-outline"
                                   v-on:click="update"
                                   style="background-color:#f5f7fa;color:#909399;height:36px;border:1px solid #DCDFE6;margin-left:-8px;z-index:3;position:relative;border-bottom-left-radius:0px;border-top-left-radius:0px;">
                            更新部门
                        </el-button>
                    </div>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="最后登录IP">
                    <el-input v-model="formData.LastIp" disabled style="max-width:500px;">
                    </el-input>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="手机">
                    <el-input style="max-width:500px;" v-model.trim="formData.Mobile" v-validate="{data:formData.Mobile,dataType:'mobile',ignoreEmpty:true,errorMsg:'手机号码格式错误！'}" maxlength="15">
                        <el-button slot="append" icon="el-icon-circle-check" v-if="formData.Mobile==1" style="width:121px">已验证</el-button>
                        <el-button slot="append" icon="el-icon-circle-close" v-else style="width:121px">未验证</el-button>
                    </el-input>
                    <span class="help-block" id="_ValidateTips_Mobile"></span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="登录次数">
                    <el-input style="max-width:500px;" disabled v-model="formData.Logins"></el-input>
                    <span class="help-block validate-tips-box"></span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="邮箱">
                    <el-input style="max-width:500px;" v-model.trim="formData.Email" v-validate="{data:formData.Email,dataType:'email',ignoreEmpty:true,errorMsg:'邮箱地址格式错误！'}" maxlength="50">
                        <el-button slot="append" icon="el-icon-circle-check"  v-if="formData.EmailState==1" style="width:121px">已验证</el-button>
                        <el-button slot="append" icon="el-icon-circle-close"  v-else style="width:121px">未验证</el-button>
                    </el-input>
                    <span class="help-block" id="_ValidateTips_Email"></span>
                </el-form-item>
            </el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
    </el-form>
    <div style="padding-bottom:15px;margin-left:10px;line-height:40px"><b>其他信息</b></div>
        <el-form ref="form" label-width="150px" label-position="left" size="medium">
                <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:@id,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>
                @{
                string beforeSubmitJs = "";
                var data = new ViewDataDictionary();
                data.Add("from", PageAdmin.Common.FromEnum.Admin);
                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:168px">
        <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">
    function BeforeSubmit()
    {
        @Html.Raw(beforeSubmitJs)
        return true;
    }
    //绑定数据
    var id = "@Request.QueryString["id"]";
    var formData = @Html.RawModel((string)Model);
    formData.Password = "";
    formData.Guid = "@guid";
    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: {
            goMember: function () {
                window.open("@Url.ActionUrl("RedirectToMemberCenter")?uid=" + formData.Id, "_blank");
            },
            updatePassword: function () {
                var _this = this;
                var valiedate = validateDataTypes.password(formData.Password);
                if (valiedate!=true) {
                    _this.$notify.error({
                        title: '错误',
                        message: valiedate
                    });
                    return false;
                }
                _this.postSubmit(true);
            },
            update: function () {
                var _this = this;
                _this.postSubmit(true);
            },
            postSubmit: function (validated) {
                var newFormData = JSON.parse(JSON.stringify(formData));
                if (newFormData.DepartmentId != undefined && newFormData.DepartmentId != null && newFormData.DepartmentId != "" && newFormData.DepartmentId != 0)
                {
                    newFormData.DepartmentId = newFormData.DepartmentId[newFormData.DepartmentId.length - 1];
                }
                if (validated != true)
                {
                    validated = false;
                }
                if (validated == false)
                {
                    validated = this.validateForm({ beforeSubmit: function () { return BeforeSubmit() } });//jquery表单验证
                }
                if (validated) {
                    this.submit({ url: "@Url.ActionUrl("Edit")", data: formData });
                }
            }
        },
        watch: {
        }
    });

</script>