@{
    CurrentUser user = ViewBag.CurrentUser;
    string table = ViewBag.Table;
    IEnumerable<dynamic> fieldData = Html.GetFieldList(table, "list", user);
    IEnumerable<dynamic> orderFieldListData = Html.GetFieldList(table, "order", user);
    IEnumerable<dynamic> searchFieldListData = Html.GetFieldList(table, "search", user);
}
<style>
    .count0 .el-badge__content {
        display: none
    }
    .avatar-image{width:28px;height:28px;border-radius:25px;margin-right:6px;}
</style>
<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box" onclick="loadData()">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <template>
        <el-tabs v-model="searchData.state" type="card" @@tab-click="handleClick">
            <el-tab-pane label="已审核" name="1"></el-tab-pane>
            <el-tab-pane name="0">
                <span slot="label">
                    <el-badge :value="dataCount.nopass" :class="['count'+dataCount.nopass.toString()]" :max="999">待审核</el-badge>
                </span>
            </el-tab-pane>
            <el-tab-pane name="-1">
                <span slot="label">
                    <el-badge :value="dataCount.disable" :class="['count'+dataCount.disable.toString()]" :max="999" type="info">已禁用</el-badge>
                </span>
            </el-tab-pane>
            <el-tab-pane name="-2">
                <span slot="label">
                    <el-badge :value="dataCount.recycle" :class="['count'+dataCount.recycle.toString()]" :max="999" type="info">回收站</el-badge>
                </span>
            </el-tab-pane>
        </el-tabs>
    </template>

    <div class="menu-bar-box">
        <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
            <tr>
                <td>
                    <el-tooltip class="item" effect="dark" content="添加" placement="bottom-start">
                        <el-button size="small" type="button" v-on:click="dialog({title:'用户添加',url:'@Url.ActionUrl("add")',target:'self',shadeClose:false})">添加</el-button>
                    </el-tooltip>
                    <el-dropdown>
                        <el-button size="small" >
                            功能菜单<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>

                        <el-dropdown-menu slot="dropdown" v-if="searchData.state=='-2'">
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@table',data:{ids:getSelectedPropertys(selectList,'Id'),setField:'State',setValue:1},success:function(){loadData()},beforeExecute:function(){return checkSelectedItems(selectList)},})">还原为已审核</a></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@table',data:{ids:getSelectedPropertys(selectList,'Id'),setField:'State',setValue:0},success:function(){loadData()},beforeExecute:function(){return checkSelectedItems(selectList)},})">还原为待审核</a></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@table',data:{ids:getSelectedPropertys(selectList,'Id'),setField:'State',setValue:-1},success:function(){loadData()},beforeExecute:function(){return checkSelectedItems(selectList)},})">还原为已禁用</a></el-dropdown-item>
                            <el-dropdown-item class="divider"></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("ClearInvalid")',success:function(){loadData()},successMsg:'操作成功'})">清理冗余数据</a></el-dropdown-item>
                            <el-dropdown-item class="divider"></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("Delete")',data:{Id:getSelectedPropertys(selectList,'Id')},confirmMsg:'是否确定删除?此操作不可恢复!',success:function(){loadData()},successMsg:'删除成功',beforeExecute:function(){return checkSelectedItems(selectList)},})">删除</a></el-dropdown-item>
                        </el-dropdown-menu>

                        <el-dropdown-menu slot="dropdown" v-if="searchData.state!='-2'">
                            <el-dropdown-item><a class="ui-setMultiple" v-on:click="dialog({title:'用户组设置', url:'@Url.ActionUrl("MemberGroupSet")?ids='+getSelectedPropertys(selectList),width:'500px',height:'400px',beforeExecute:function(){return checkSelectedItems(selectList)}})" href="javascript:void(0)">用户组设置</a></el-dropdown-item>
                            <el-dropdown-item><a class="ui-setMultiple" v-on:click="dialog({title:'部门设置', url:'@Url.ActionUrl("DepartmentSet")?ids='+getSelectedPropertys(selectList),width:'500px',height:'400px',beforeExecute:function(){return checkSelectedItems(selectList)}})" href="javascript:void(0)">部门设置</a></el-dropdown-item>
                            <el-dropdown-item class="divider"></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@table',data:{ids:getSelectedPropertys(selectList),setField:'State',setValue:1},success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">审核</a></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@table',data:{ids:getSelectedPropertys(selectList),setField:'State',setValue:0},success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">取消审核</a></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@table',data:{ids:getSelectedPropertys(selectList),setField:'State',setValue:-1},success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">禁用</a></el-dropdown-item>
                            <el-dropdown-item class="divider"></el-dropdown-item>
                            <el-dropdown-item><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("Recycle")',data:{Id:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',success:'loadData()',beforeExecute:function(){return checkSelectedItems(selectList)},})">删除</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </td>
                <td align="right">
                    <el-select size="mini" style="color:black;" v-model="searchData.memberGroupId" clearable v-on:change="loadData()" placeholder="选择用户组">
                        <el-option v-for="item in memberGroupList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-cascader size="mini" v-model="searchData.departmentId" v-on:change="loadData()" :options="departmentList" placeholder="请选择部门" clearable :props="{ expandTrigger: 'hover' }"></el-cascader>
                    <el-select id="orderBy" size="mini" style="color:black;" v-model="searchData.orderBy" clearable v-on:change="loadData()" placeholder="选择排序方式">
                        <el-option value="id desc" label="按注册时间↓"></el-option>
                        <el-option value="id asc" label="按注册时间↑"></el-option>
                        <el-option value="lastDate desc" label="按最后登录时间"></el-option>
                        <el-option value="logins desc" label="按登录次数↓"></el-option>
                        @Html.Partial("~/Areas/E/Views/CustomForm/OrderFieldPartial.cshtml", orderFieldListData)
                    </el-select>
                    <el-select size="mini" v-model="searchData.searchField">
                        <el-option value="username" label="用户名"></el-option>
                        <el-option value="nickName" label="昵称"></el-option>
                        <el-option value="email" label="邮箱"></el-option>
                        <el-option value="mobile" label="手机号"></el-option>
                        @Html.Partial("~/Areas/E/Views/CustomForm/SearchFieldPartial.cshtml", searchFieldListData)
                        <el-option value="regDate" label="注册日期"></el-option>
                        <el-option value="lastDate" label="登录日期"></el-option>
                    </el-select>
                    <el-input v-if="!isDatetime" size="mini" style="width:150px;" placeholder="输入关键词" v-model.trim="searchData.searchKeyword" clearable v-on:clear="loadData()"></el-input>
                    <el-date-picker v-if="isDatetime" size="mini" v-model.trim="searchData.searchDateRange" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable v-on:clear="loadData(false)"></el-date-picker>
                    <el-button size="mini" v-on:click="loadData()">搜索</el-button>
                </td>
            </tr>
        </table>
    </div>
    <el-dialog title=""
               :visible.sync="avatarDialogVisible"
               width="50%">
        <a :href="avatarUrl" target="_attachmentPreviewImageUrl" v-if="isAvatarUrl(avatarUrl)">
            <img :src="avatarUrl" style="max-width:100%;max-height:100%" />
        </a>
    </el-dialog>
    <el-table ref="multipleTable" :data="dataList" row-key="Id" tooltip-effect="dark" border highlight-current-row style="width: 100%" v-on:selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40" align="center"></el-table-column>
        <el-table-column prop="Name" label="用户名" min-width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-dropdown>
                    <div class="el-dropdown-link" style="display:-webkit-flex;display:flex;align-items:center;flex-direction:row;">
                        <a href="javascript:void(0)" v-on:click="avatarDialogVisible=true;avatarUrl=scope.row.Avatar" v-if="isAvatarUrl(scope.row.Avatar)"><img :src="scope.row.Avatar" class="avatar-image"/></a>
                        <span> {{scope.row.Username}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <span>用户Id：{{scope.row.Id}}</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span>昵称：{{scope.row.NickName}}</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span>登录次数：{{scope.row.Logins}}</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span>注册ip：{{scope.row.RegIp}}</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span>最后登录Ip：{{scope.row.LastIp}}</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span>最后登录：{{scope.row.LastDate}}</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span>
                                <a :href="'@Url.ActionUrl("RedirectToMemberCenter")?uid='+scope.row.Id" target="_blank"><i class="fa fa-sign-in" aria-hidden="true"></i>进入用户中心</a>
                            </span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>
        <el-table-column prop="Remark" label="用户组" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{getGroupName(scope.row.MemberGroupId)}}
            </template>
        </el-table-column>
        <el-table-column prop="Remark" label="部门" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{getDepartmentName(scope.row.DepartmentId,departmentList)}}
            </template>
        </el-table-column>
        <el-table-column prop="Remark" label="邮箱" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <i class="el-icon-success" style="color:#67C23A"  title="邮箱已验证" v-show="scope.row.EmailState==1"></i>
                {{scope.row.Email}}
            </template>
        </el-table-column>
        <el-table-column prop="Remark" label="手机" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <i class="el-icon-success" style="color:#67C23A"  title="手机已验证" v-show="scope.row.MobileState==1"></i>
                {{scope.row.Mobile}}
            </template>
        </el-table-column>
        <el-table-column label="注册时间" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{scope.row.RegDate}}
            </template>
        </el-table-column>
        <el-table-column prop="Remark" label="状态" align="center" width="100">
            <template slot-scope="scope">
                <span :class="{'text-danger':scope.row.State==-1,'text-success':scope.row.State==1}" :style="{color:getColor(scope.row.State)}">{{scope.row.State | getStateName}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="Remark" label="操作" align="center" width="180">
            <template slot-scope="scope">
                <el-button-group>
                    <el-button size="small"  v-on:click="dialog({title:'用户资料编辑',url:'@Url.ActionUrl("Edit")?id='+scope.row.Id,target:'self'})">修改</el-button>
                    <el-button size="small"  v-show="searchData.state!='-2'" v-on:click="submit({url: '@Url.ActionUrl("Recycle")',data:{id:scope.row.Id},confirmMsg:'确定删除吗？',success:'loadData()'})">删除</el-button>
                    <el-button size="small"  v-show="searchData.state=='-2'" v-on:click="submit({url: '@Url.ActionUrl("Delete")',data:{id:scope.row.Id},confirmMsg:'确定删除吗?此操作不可恢复!',success:'loadData()'})">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <ui-page-panel v-model="pageInfo" v-on:change="loadData" v-if="pageInfo.RecordCount>0"></ui-page-panel>
</div>


<script type="text/javascript">
        //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            avatarDialogVisible: false,
            avatarUrl:"",
            searchData: { state: "1", orderBy: "", memberGroupId: "", departmentId: "", searchField: "username", searchDateRange:"",searchKeyword: "" },
            dataCount: @Html.Raw(JsonHelper.JsonParse(ViewBag.CountData)),
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            memberGroupList:@Html.Raw(Html.GetCanAdminMemberGroupOptions()),
            departmentList: @Html.Raw(Html.GetTreeOptionsJson("pa_department","name","","xuhao asc")),
            dataList: [],
            selectList: [],
            allfieldListData:@Html.Raw(JsonHelper.JsonParse(searchFieldListData)),
            isDatetime: false,
        },
        filters: {
            getStateName: function (value) {
                value = value.toString();
                var stateName = ["回收站", "禁用", "待审", "已审"];
                if (!isInt(value)) {
                    value = 0;
                }
                value = parseInt(value.toString());
                return stateName[value + 2];
            },
        },
        methods: {
            isAvatarUrl: function (path) {
                if (isNullOrEmpty(path)){
                    return false;
                }
                else if (isImage(path)){
                    return true;
                }
                else if (path.toLowerCase().indexOf("http://") >= 0 || path.toLowerCase().indexOf("https://") >= 0) {
                    //qq，微信的远程头像
                    return true;
                }
                else{
                    return false;
                }
            },
            loadData: function () {
                loadData()
            },
            handleClick: function (tab, event) {
                this.searchData.state = tab.name;
                loadData(true);
            },
            handleSelectionChange: function (val) {
                this.selectList = val;
            },
            getGroupName: function (value) {
                if (value == "0" || value == "") {
                    return "-";
                }
                var item = this.memberGroupList.find(function (item) { return item.value == value });
                if (item == undefined) {
                    return "-";
                }
                return item.label;
            },
            getDepartmentName: function (value, departmentList) {
                var name = "-";
                var vue = this;
                if (value == "0" || value == "") {
                    return name;
                }

                departmentList.some(function (item) {
                    if (item.value == value) {
                        name = item.label;
                        return true;
                    }
                    if (item.children != undefined && item.children != null && item.children.length > 0)
                    {
                        name = vue.getDepartmentName(value, item.children);

                    }
                })
                if (name == null) {
                    return "-";
                }
                return name;
            },
            getColor: function (state) {
                var color = { s1: "#333", s0: "#E6A23C", s_1: "#F56C6C" };
                state = state.toString().replace("-", "_");
                return color["s" + state];
            },
        },
        watch: {
            "searchData.searchField": {
                handler: function (newData, oldData) {
                    var _this = this;
                    if (newData != oldData) {
                        if (newData == "username" || newData == "email" || newData == "mobile") {
                            _this.isDatetime = false;
                        } else if (newData == "regDate" || newData == "lastDate") {
                            _this.isDatetime = true;
                        } else {
                            _this.allfieldListData.some(function (item, index) {
                                if (item.Name == newData) {
                                    if (item.ValueType == "datetime") {
                                        _this.isDatetime = true;
                                    } else {
                                        _this.isDatetime = false;
                                    }
                                    return true;
                                }
                            });
                        }


                        if (_this.isDatetime) {
                            _this.searchData.searchKeyword = "";
                        }
                        else {
                            _this.searchData.searchDateRange = "";
                        }


                    }
                },
                immediate: true,
                deep: true
            },
        }
    });
//加载数据
    function loadData(reCount)
    {
        var serverData = extend(vue.pageInfo, vue.searchData);
        if (serverData.departmentId != "" && serverData.departmentId.length > 0)
        {
            serverData.departmentId = serverData.departmentId[serverData.departmentId.length - 1]
        }
        vue.ajax({
            url: "@Url.ActionUrl("PageListData")",
            data: serverData,
            success: function (responseData) {
                if (responseData != "")
                {
                    vue.dataList = responseData.Data;
                    vue.pageInfo = responseData.PageInfo;
                    if (reCount) {
                        getCount();
                    }
                }
            }
        });
    }


   //统计信息,tab选项卡触发
    function getCount()
    {
        vue.ajax({
            url: "@Url.ActionUrl("GetCount")",
            data:{},
            success: function (responseData) {
                if (!isNullOrEmpty(responseData))
                {
                    vue.dataCount = responseData;
                }
            }
        });
    }
    loadData();
</script>
