@{ 
    string parentTable = Request.QueryString["parentTable"];
}
<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>
    <el-dialog title=""
               :visible.sync="dialogVisible"
               width="50%">
        <a :href="previewImageUrl" target="_attachmentPreviewImageUrl" v-if="isImage(previewImageUrl)" >
            <img :src="previewImageUrl" style="max-width:100%;max-height:100%" />
        </a>
    </el-dialog>
    <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" v-model="searchData.searchField">
                        <el-option value="name" label="按文件名搜索"></el-option>
                        <el-option value="path" label="按文件路径搜索"></el-option>
                        <el-option value="username" label="按用户搜索"></el-option>
                        <el-option value="parentField" label="按父级字段搜索"></el-option>
                    </el-select>
                    <el-input size="mini" style="width:150px;" placeholder="搜索关键词" v-model.trim="searchData.searchKeyword" clearable v-on:clear="loadData"></el-input>
                    <el-button size="mini" onclick="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>
        <el-table-column label="文件名" width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <a :href="scope.row.Domain+scope.row.Path" target="_blank">{{scope.row.Name}}</a>
            </template>
        </el-table-column>
        <el-table-column label="保存路径" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <a :href="scope.row.Domain+scope.row.Path" target="_blank">{{scope.row.Domain+scope.row.Path}}</a>
            </template>
        </el-table-column>
        <el-table-column label="缩略图" :show-overflow-tooltip="true" width="80">
            <template slot-scope="scope">
                <a href="javascript:void(0)" v-if="isImage(scope.row.Path)" v-on:click="openImageDialog(scope.row.Domain+scope.row.Path)"><img :src="scope.row.Domain+(scope.row.Thumbnail || scope.row.Path)"  class="thumbnail-mini"/></a>
            </template>
        </el-table-column>
        <el-table-column label="父级表" width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              @parentTable
            </template>
        </el-table-column>
        <el-table-column prop="ParentField" label="父级字段" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="ParentId" label="父级Id" width="120" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="Size" label="大小(kb)" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="Username" label="用户" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="Thedate" label="上传时间" width="200" :show-overflow-tooltip="true"> </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: {
            dialogVisible: false,
            previewImageUrl:"",
            selectList:[],
            searchData: { state:"1", thedate: "", searchField:"name",searchKeyword:""},
            pageInfo: { PageSize: 15, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList:[],
        },
        methods: {
            openImageDialog: function (path){
                this.dialogVisible = true;
                this.previewImageUrl = path;
            },
            isImage: function (path)
            {
                return isImage(path); //basic中定义
            },
            tabClick: function (tab, event) {
                this.loadData();
            },
            handleSelectionChange: function (val) {
                this.selectList = val;
            },
            loadData: function () {
                loadData();
            }
        }
    });

    //加载数据
    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>


