@{
    string table = ViewBag.Table;
    CurrentUser user = ViewBag.CurrentUser;
    IEnumerable<dynamic> fieldData = Html.GetFieldList(table, "list", user, PageAdmin.Common.FromEnum.Admin);
    IEnumerable<dynamic> orderFieldListData = Html.GetFieldList(table, "order", user);
    IEnumerable<dynamic> searchFieldListData = Html.GetFieldList(table, "search", user);
}

<div class="main" id="main" v-cloak>
    <template>
        <el-tabs type="card" v-model="searchData.state" v-on:tab-click="tabClick">
            <el-tab-pane label="使用中" name="1"></el-tab-pane>
            <el-tab-pane label="未使用" name="0"></el-tab-pane>
            <el-tab-pane label="已冗余" name="-1"></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-button size="small"  v-show="searchData.state!='1'" v-on:click="submit({url:'@Url.ActionUrl("Delete")?table=@ViewBag.Table',data:{ids:getSelectedPropertys(selectList,'Id')},confirmMsg:'确定删除吗？',success:function(){loadData()},successMsg:'删除成功',beforeExecute:function(){return checkSelectedItems(selectList)},})">删除</el-button>
                    <el-button size="small"  v-show="searchData.state=='1'" v-on:click="submit({url:'@Url.ActionUrl("SetState")?table=@ViewBag.Table',data:{ids:getSelectedPropertys(selectList,'Id'),state:-1},confirmMsg:'请确保数据已经冗余再进行此操作，是否确定？',success:function(){loadData()},successMsg:'提交成功',beforeExecute:function(){return checkSelectedItems(selectList)},})">转为冗余</el-button>
                </td>
                <td align="right">
                    <el-select size="mini" placeholder="选择排序方式" v-model="searchData.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="searchData.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="searchData.searchKeyword"></el-input>
                    <el-date-picker v-if="isDatetime" size="mini" v-model="searchData.searchKeyword" type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    <el-button size="mini" v-on:click="loadData">搜索</el-button>
                </td>
            </tr>
        </table>
    </div>

    <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" 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 = " width=\"" + width + "\" ";
            }
            <el-table-column align="left" label="@remark" @Html.Raw(width) :show-overflow-tooltip="true">
                    <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"></ui-list-attachment-display>
                        }
                        else if (fieldType == "file" || fieldType == "files")
                        {
                            <ui-list-attachment-display display-type="file" :file-list="scope.row.@field"></ui-list-attachment-display>
                        }
                        else
                        {
                            <span>{{scope.row.@field}}</span>
                        }
                    </template>
            </el-table-column>
        }
        <el-table-column  label="父级表">
            <template slot-scope="scope">
                @table
            </template>
        </el-table-column>
        <el-table-column prop="ParentId" label="父级Id"></el-table-column>
        <el-table-column prop="Username" label="用户" width="150"></el-table-column>
        <el-table-column label="管理" width="100">
            <template slot-scope="scope">
                <el-button size="small"  v-on:click="dialog({'title':'数据修改',url:'@Url.ActionUrl("Edit")?id='+scope.row.Id+'&guid='+scope.row.Guid+'&table=@ViewBag.Table',target:'self',width:'90%',height:'90%'})">编辑</el-button>
            </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: {
            selectList:[],
            searchData: { state:"1", thedate: "",orderBy:"", searchField:"username",searchKeyword:""},
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList: [],
            allfieldListData:@Html.Raw(JsonHelper.JsonParse(searchFieldListData)),
            isDatetime: false,
        },
        methods: {
            tabClick: function(tab, event) {
                this.loadData();

            },
            handleSelectionChange: function(val) {
                this.selectList = val;
            },
            loadData: function () {
                loadData();
            },
        },
        watch: {
            "searchData.searchField": {
                handler: function (newData, oldData) {
                    var _this = this;
                    if (newData != oldData) {
                        if (newData == "username") {
                            _this.isDatetime = false;
                        } else {
                            _this.allfieldListData.some(function (item, index) {
                                if (item.Name == newData) {
                                    if (item.ValueType == "datetime") {
                                        _this.isDatetime = true;
                                    } else {
                                        _this.isDatetime = false;
                                    }
                                    return true;
                                }
                            });
                        }
                        _this.searchData.searchKeyword = "";
                    }
                },
                immediate: true,
                deep: true
            },
        }

    });

    //加载数据
    function loadData()
    {
        var serverData = extend({}, vue.searchData, vue.pageInfo);
        vue.ajax({
        url:"@Url.ActionUrl("PageListData")?table=@ViewBag.Table",
        data: serverData,
        success: function (responseData) {
            if (responseData != "") {
                vue.dataList = responseData.Data;
                vue.pageInfo = responseData.PageInfo;
                vue.selectedIds = [];
            }
            }
        });
    }
    loadData();
</script>


