@{
    PageAdmin.Common.PermissionInformationModel permissionsSet = ViewBag.PermissionsSet;
    string State = Request.QueryString["state"];
    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).Select(c => new { Name = c.Name, Remark = c.Remark, ValueType = c.ValueType });
    int tableId = ViewBag.TableId;
    var blockset = StringHelper.Format<int>(Request.QueryString["blockSet"]);//可视化区块传递
}
<style>
    .count0 .el-badge__content {
        display: none
    }
</style>
<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i>@ViewBag.CurrentSiteName</el-breadcrumb-item>
            <el-breadcrumb-item>@ViewBag.TableRemark</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <template>
        <el-tabs type="card" v-model="searchInfo.state" v-on:tab-click="tabClick">
            <el-tab-pane label="已审核" name="1"></el-tab-pane>
            <el-tab-pane name="0">
                <span slot="label">
                    <el-badge :value="infoCount.nopass" :class="['count'+infoCount.nopass.toString()]" :max="999">待审核</el-badge>
                </span>
            </el-tab-pane>
            <el-tab-pane name="-1">
                <span slot="label">
                    <el-badge :value="infoCount.returned" :class="['count'+infoCount.returned.toString()]" :max="999" type="info">已退回</el-badge>
                </span>
            </el-tab-pane>
            <el-tab-pane name="-2">
                <span slot="label">
                    <el-badge :value="infoCount.draft" :class="['count'+infoCount.draft.toString()]" :max="999" type="info">草稿</el-badge>
                </span>
            </el-tab-pane>
            @if (user.IsSuperAdmin || permissionsSet.CanAdminRecycleBin == 1)
            {
                <el-tab-pane name="-3">
                    <span slot="label">
                        <el-badge :value="infoCount.recycle" :class="['count'+infoCount.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" v-on:click="dialog({title:'信息添加',url:'@Url.ActionUrl("add")?table=@ViewBag.Table&columnId='+searchInfo.columnId,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="searchInfo.state!=-3">
                            @if (user.IsSuperAdmin || permissionsSet.CanSetState == 1)
                            {
                                <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><a href="javascript:void(0)" v-on:click="submit({url:'@Url.ActionUrl("SetField","CommonMethod")?table=@table',data:{ids:getSelectedPropertys(selectList,'Id'),setField:'State',setValue:-2},success:function(){loadData()},beforeExecute:function(){return checkSelectedItems(selectList)},})">转为草稿</a></el-dropdown-item>
                                <el-dropdown-item class="divider"></el-dropdown-item>
                            }
                            @*@if (user.IsSuperAdmin || permissionsSet.CanPushData == 1)
                            {
                                <el-dropdown-item>
                                    <a href="javascript:void(0)" class="ui-setMultiple" v-on:click="dialog({title:'信息推送',url:'@Url.ActionUrl("PushData")?table=@(ViewBag.Table)&tableId=@(tableId)&ids='+getSelectedPropertys(selectList,'Id'),width:'90%',height:'95%',target:'self',beforeExecute:function(){return checkSelectedItems(selectList)}})">信息推送</a>
                                </el-dropdown-item>
                                <el-dropdown-item class="divider"></el-dropdown-item>
                            }*@
                            @if (user.IsSuperAdmin || permissionsSet.CanMultipleSet == 1)
                            {
                                <el-dropdown-item><a href="javascript:void(0)" class="ui-setMultiple" v-on:click="dialog({title:'批设属性',url:'@Url.ActionUrl("SetMultiple")?table=@(ViewBag.Table)&ids='+getSelectedPropertys(selectList,'Id'),width:'90%',height:'95%',target:'self',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")?table=@(ViewBag.Table)',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="searchInfo.state==-3">
                            @if (user.IsSuperAdmin || permissionsSet.CanSetState == 1)
                            {
                                <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:-2},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("Delete")?table=@(ViewBag.Table)',data:{Id:getSelectedPropertys(selectList,'Id')},confirmMsg:'是否确定删除?此操作不可恢复!',success:function(){loadData()},successMsg:'删除成功',beforeExecute:function(){return checkSelectedItems(selectList)},})">删除</a></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </td>
                <td align="right">
                    <ui-cascader size="mini" v-model="searchInfo.columnId" placeholder="请选择栏目" :options="columnOptions" :props="{ expandTrigger: 'hover',multiple:false,checkStrictly:true }">
                    </ui-cascader>
                    <el-select size="mini" placeholder="根据属性选择" v-model="searchInfo.searchAttr" clearable v-on:change="loadData">
                        <el-option value="isGood" label="推荐"></el-option>
                        <el-option value="isHot" label="热门"></el-option>
                        <el-option value="isTop" label="置顶"></el-option>
                        <el-option value="notOnline" label="待上线"></el-option>
                        <el-option value="isExpire" label="已到期"></el-option>
                        <el-option value="hasThumbnail" label="带缩略图"></el-option>
                        <el-option value="subColumnData" label="副栏目数据"></el-option>
                        <el-option value="noColumn" label="未分类信息"></el-option>
                        <el-option value="publishFromAdmin" label="管理员投稿"></el-option>
                        <el-option value="publishFromMember" label="用户投稿"></el-option>
                        <el-option value="publishFromGuest" label="前台页面投稿"></el-option>
                    </el-select>
                    <el-select size="mini" placeholder="选择排序方式" v-model="searchInfo.orderBy" clearable v-on:change="loadData">
                        <el-option value="id desc" label="按id↓"></el-option>
                        <el-option value="id asc" label="按id↑"></el-option>
                        @foreach (var item in orderFieldListData)
                        {
                            <el-option value="@(item.Name) desc" label="按@(item.Remark)↓"></el-option>
                            <el-option value="@(item.Name) asc" label="按@(item.Remark)↑"></el-option>
                        }
                        <el-option value="clicks asc" label="按点击↑"></el-option>
                        <el-option value="clicks desc" label="按点击↓"></el-option>
                    </el-select>
                    <el-select size="mini" placeholder="选择搜索字段" v-model="searchInfo.searchField">
                        @foreach (var item in searchFieldListData)
                        {
                            <el-option value="@(item.Name)" label="按@(item.Remark)搜索"></el-option>
                        }
                        <el-option value="username" label="按用户名搜索"></el-option>
                    </el-select>
                    <el-input v-if="!isDatetime" size="mini" style="width:150px;" placeholder="搜索关键词" v-model.trim="searchInfo.searchKeyword" clearable v-on:clear="loadData"></el-input>
                    <el-date-picker v-if="isDatetime" size="mini" v-model.trim="searchInfo.searchDateRange" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable v-on:clear="loadData"></el-date-picker>
                    <el-button size="mini" v-on:click="loadData">搜索</el-button>
                </td>
            </tr>
        </table>
    </div>

    <el-table :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" align="center" width="40"> </el-table-column>
        @foreach (var item in fieldData)
        {
            int fieldId = item.Id;
            int listWords =StringHelper.Format<int>(item.ListWords);
            string remark = item.Remark;
            string field = StringHelper.FirstCharUpper(item.Name);
            string fieldType = item.FieldType;
            string valueType = item.ValueType;
            string width = item.ListWidth;
            if (!string.IsNullOrEmpty(width) && width!="0")
            {
                width = " width=\"" + width + "\" ";
            }
            else
            {
                width = "";
            }
            <el-table-column align="left" label="@remark" @Html.Raw(width) :show-overflow-tooltip="true" @Html.Raw(field == "Title" ? "class-name=\"fa-eye-hover\"" : "")>
                <template slot-scope="scope">
                    @if (new string[] { "subtable" }.Contains(fieldType))
                    {
                        string subTableType = item.SubTableType;
                        string bt_text = StringHelper.Format<string>(item.BtText);
                        string win_width = StringHelper.Format<string>(item.WinWidth);
                        string win_height = StringHelper.Format<string>(item.WinHeight);
                        <span>
                            <el-button size="mini" v-on:click="dialog({title:'@(remark)',url:'/E/SubData/@(subTableType=="multiple"?"":"Set")?parentId='+scope.row.Id+'&fieldId=@fieldId',width:'@win_width',height:'@win_height',target:'self'})">@(bt_text)</el-button>
                        </span>
                    }
                    else if (fieldType == "image" || fieldType == "images")
                    {
                        <ui-list-attachment-display display-type="image" :file-list="scope.row.@field" :key="refreshKey"></ui-list-attachment-display>
                    }
                    else if (fieldType == "file" || fieldType == "files")
                    {
                        <ui-list-attachment-display display-type="file" :file-list="scope.row.@field" :key="refreshKey"></ui-list-attachment-display>
                    }
                    else if (fieldType == "radio" || fieldType == "checkbox" || fieldType == "select" || fieldType == "cascader" ||  fieldType == "datapicker")
                    {
                        <span>{{left(@listWords,scope.row["_@field"])}}</span>
                    }
                    else
                    {
                        if (field == "Title")
                        {
                            <a  href="javascript:void(0)" v-on:click="searchInfo.columnId=scope.row.ColumnId;loadData()">{{getColumnName(scope.row)}}</a>
                            <a :href="'/e/preview/info?table=@(table)&id='+scope.row.Id" target="_blank">{{left(@listWords,scope.row["@field"])}}</a>
                            <a :href="'/e/preview/info?table=@(table)&id='+scope.row.Id" target="_blank" title="预览"><span class="el-icon-view"></span></a>
                        }
                        else
                        {
                            <span>{{left(@listWords,scope.row["@field"])}}</span>
                        }
                    }
                </template>
            </el-table-column>
        }
        <el-table-column align="left" label="用户名" prop="Username" width="120" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column align="left" label="状态&属性" width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <span :style="{color:getColor(scope.row.State)}">{{scope.row.State | stateName}}</span><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>信息Id：{{scope.row.Id}}</el-dropdown-item>
                        <el-dropdown-item>上线状态：{{scope.row.IsOnline==1?"已上线":"未上线"}}</el-dropdown-item>
                        <el-dropdown-item>过期状态：{{scope.row.IsExpire==1?"已过期":"未过期"}}</el-dropdown-item>
                        <el-dropdown-item>带缩略图：{{scope.row.HasThumbnail==1?"是":"否"}}</el-dropdown-item>
                        <el-dropdown-item><span>浏览量：{{scope.row.Clicks}}</span></el-dropdown-item>
                        <el-dropdown-item>推荐级别：{{scope.row.IsGood}}</el-dropdown-item>
                        <el-dropdown-item><span>置顶级别：{{scope.row.IsTop}}</span></el-dropdown-item>
                        <el-dropdown-item><span>热门级别：{{scope.row.IsHot}}</span></el-dropdown-item>
                        <el-dropdown-item>发布来源：{{scope.row.PublishFrom==0?"后台发布":""}}{{scope.row.PublishFrom==1?"会员发布":""}}{{scope.row.PublishFrom==10?"匿名投稿":""}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>

        <el-table-column align="center" width="180" label="操作">
            <template slot-scope="scope">
                <el-button-group>
                    <el-button size="small" v-show="scope.row.IsSubColumnData==0" v-on:click="dialog({title:'信息编辑',url:'@Url.ActionUrl("Edit")?table=@ViewBag.Table&id='+scope.row.Id,target:'self',shadeClose:false})">修改</el-button>
                    <el-button size="small" v-show="searchInfo.state!=-3" v-on:click="submit({url:'@Url.ActionUrl("Recycle")?table=@ViewBag.Table',data:{id:scope.row.Id},confirmMsg:'确定删除吗?',success:function(){loadData()}})">删除</el-button>
                    <el-button size="small" v-show="searchInfo.state==-3" v-on:click="submit({url:'@Url.ActionUrl("Delete")?table=@ViewBag.Table',data:{id:scope.row.Id},confirmMsg:'确定删除吗?此操作不可恢复!',success:function(){loadData()}})">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <ui-page-panel v-model="pageInfo" v-on:change="loadData(false)" v-if="pageInfo.RecordCount>0"></ui-page-panel>

    <div class="footer-submit-bar" style="padding-left:20px" v-if="@blockset==1">
        <el-button type="primary" onclick="closeSelf()">关闭</el-button>
    </div>
</div>

<script type="text/javascript">
    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            refreshKey:1, //ajax刷新次数，解决列表中组件不刷新的问题。
            columnOptions:@Html.Raw(Html.GetColumnTreeJson(tableId, user)),
            selectList: [],
            infoCount: @Html.Raw(JsonHelper.JsonParse(ViewBag.CountData)),
            searchInfo: { state: "1", columnId: request("columnId"), searchAttr: "", orderBy: "", searchField: "title", searchDateRange: "", searchKeyword: "" },
            dataList: [],
            pageInfo: { PageSize:0, CurrentPage: 1, PageCount: 0, RecordCount: 0 },
            searchFieldListData:@Html.Raw(JsonHelper.JsonParse(searchFieldListData)),
            isDatetime:false,
        },
        //过滤器
        filters: {
            stateName: function (state) {
                var stateName = { s1: "已审", s0: "待审", s_1: "已退回", s_2: "草稿", s_3: "回收站" };
                state = state.toString().replace("-", "_");
                return stateName["s" + state];
            },
        },
        methods: {
            left:function (len,txt) {
                if (isNullOrEmpty(txt)) {
                    return "";
                } else {
                    txt = txt.toString();
                }
                if (isNullOrEmpty(len) || len == "0") {
                    return txt;
                } else {
                    return txt.left(len);
                }
            },
            getColumnName: function (rows) {
                var _this = this;
                var columnId = rows.ColumnId;
                function findColumn(columnOptions) {
                    if (!Array.isArray(columnOptions)) {
                        return null;
                    }
                    for (var i = 0; i < columnOptions.length; i++) {
                        var item = columnOptions[i];
                        var child = item.children;
                        if (item.value == columnId) {
                            return item.label;
                        }
                        else {
                            var name = findColumn(child);
                            if (!isNullOrEmpty(name)) {
                                return name;
                            }
                        }
                    }
                }
                var columnName = findColumn(_this.columnOptions);
                if (!isNullOrEmpty(columnName)) {
                    columnName = "[" + columnName + "]";
                }
                return columnName;
            },
            handleSelectionChange:function (val) {
                this.selectList = val;
            },
            preview: function (table, id) {
                window.open("/e/preview/info?table=" + table + "&id=" + id, "_preview");
            },
            tabClick: function(tab, event) {
               loadData(true);
            },
            getColor: function (state) {
                var color = { s1: "#333", s0: "#E6A23C", s_1: "#F56C6C", s_2: "#999" };
                state = state.toString().replace("-", "_");
                return color["s" + state];
            },
            loadData: function () {
                loadData();
            },
            htmlEncode: function (title)
            {
                return htmlEncode(title)
            },
        },
        watch: {
            "searchInfo.columnId": {
                handler: function (newTableId, oldTableId) {
                    if (newTableId != oldTableId) {
                        this.loadData(false);
                    }
                },
            },
            "searchInfo.searchField": {
                handler: function (newData, oldData) {
                    var _this = this;
                    var isdataTime = false;
                    if (newData != oldData) {
                        var includeName = false;
                        _this.searchFieldListData.some(function (item, index) {
                            if (item.Name == newData) {
                                if (item.ValueType == "datetime") {
                                    isdataTime = true;
                                } else {
                                    isdataTime = false;
                                }
                                includeName = true;
                                return includeName;
                            }
                        });
                        _this.isDatetime = isdataTime;
                        if (isdataTime){
                            _this.searchInfo.searchKeyword = "";
                        }
                        else{
                            _this.searchInfo.searchDateRange = "";
                        }
                    }
                },
                immediate: true,
                deep: true
            },
        }
    });
        //加载数据
    function loadData(reCount)
    {
        //vue.dataList = []; //重新刷新
        var serverData = extend(vue.searchInfo,vue.pageInfo);
        vue.ajax({
            url: "@Url.ActionUrl("PageListData")?table=@ViewBag.Table",
            data: serverData,
            success: function (responseData) {
                if (!isNullOrEmpty(responseData))
                {
                    vue.refreshKey++;
                    vue.dataList = responseData.Data;
                    vue.pageInfo = responseData.PageInfo;
                    if (reCount) {
                        getCount();
                    }
                }
            }
        });
    }

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