@@master_page.html
<link href="css/page_table_list.css?v=1" rel="stylesheet" />
<link href="css/page_entity_manager.css?v=1" rel="stylesheet" />
<script src="js/ace/src-min/ace.js"></script>
<script src="js/ace/src-min/ext-language_tools.js"></script>
<div id="apibox" class="card mypage">
    <!--正文-->
    <div class="card">
        <div class="search-bar"> </div>
        <div class="card">
            <form id="frmSearach" onsubmit="return false;">
                <div class="row ">
                    <div class="form-group">
                        <div class="col-md-1"><label class="form-control m-l-15">数据库:</label></div>
                        <div class="col-md-11">
                            <div class="input-group">
                                <select v-model="databaseId" @change="changeDatabase()" id="selDataBaseId" class="form-control" style="width:150px;">
                                    <option v-for="item in  database" v-bind:value="item.Id"> {{item.Name}} </option>
                                </select>
                                <input id="txtSearch" type="text" style="width:150px;margin-left:20px; margin-right:10px" class="form-control" value="" name="keyword" placeholder="请输入名称">
                                <a class="btn btn-secondary    m-r-5" id="btnSearch" data-toggle="tooltip" @click="onSearch()" href="#!"><i class="mdi mdi-magnify"></i> 搜索</a>
                                <button onclick="frmSearach.reset()" type="submit" class="btn btn-close">清空</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="card-toolbar clearfix">

                <div class="toolbar-btn-action">
                    <a @click="openAddDiv()" data-toggle="modal" data-target="#gridSystemModal" class="btn btn-primary m-r-10" href="#!"><i class="mdi mdi-plus"></i> 新增</a>
                    <a class="btn btn-success m-r-10" @click="openImportEntity()" data-toggle="tooltip" data-original-title="从数据库导入实体" href="#!"><i class="mdi mdi-format-vertical-align-bottom"></i>导入</a>
                    <a class="btn btn-warning m-r-10" @click="openCompareDatabaseStructure()" data-toggle="tooltip" data-original-title="根据实体修改表结构" href="#!"><i class="mdi mdi-redo-variant"></i>同步</a>
                    <a class="btn btn-pink m-r-10" @click="openSqlTool()" data-toggle="tooltip" data-original-title="可以方便执行SQL，让你不需要打开数据库" href="#!"><i class="mdi mdi-database"></i>SQL</a>
                    <a class="btn btn-danger m-r-10" @click="exportExcel()" data-toggle="tooltip" data-original-title="导出表文档" href="#!"><i class="mdi mdi-file-export"></i> 导出文档</a>
                    <a class="btn btn-purple m-r-10" @click="openGenerateCode()" data-toggle="tooltip" data-original-title="根据实体生成文件" href="#!"><i class="mdi mdi-language-csharp"></i>实体生成器</a>
                    <a class="btn btn-primary m-r-10" @click="openGenerateCodeByView()" data-toggle="tooltip" data-original-title="根据视图生成文件" href="#!"><i class="mdi mdi-language-csharp"></i>视图生成器</a>
                    <a class="btn btn-cyan m-r-10" @click="openSetting()" data-toggle="tooltip" data-original-title="实体管理个性化配置" href="#!"><i class="mdi mdi-account-settings-variant"></i> 配置</a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <div class="master-table-container">
                        <table class="table table-bordered">
                            <thead>
                                <tr v-if="data && data.Columns && data.Columns.length > 0">
                                    <th class="width30">
                                        <label class="lyear-checkbox checkbox-primary">
                                            <input type="checkbox" @change="selectAll" id="check-all"><span></span>
                                        </label>
                                    </th>
                                    <template v-for="(column,thIndex) in data.Columns" v-if="column.PropertyName !== 'Id'">
                                        <th>
                                            {{ column.ColumnDescription }}
                                            <span :class="sortClass">
                                                <span v-if="thIndex == 1" class="caret-wrapper">
                                                    <i @click="sortAsc" class="sort-caret ascending mdi mdi-chevron-up"></i>
                                                    <i @click="sortDesc" class="sort-caret descending mdi mdi-chevron-down"></i>
                                                </span>
                                            </span>
                                        </th>
                                    </template>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody v-if="data &&data.Data">
                                <tr v-if="data.Columns && data.Columns.length > 0" v-for="item in data.Data">
                                    <td>
                                        <label class="lyear-checkbox checkbox-primary">
                                            <input type="checkbox" name="ids[]" v-model="selectedItems" :alt="item.Id" :value="item.Id"><span></span>
                                        </label>
                                    </td>
                                    <template v-for="column in data.Columns" v-if="column.PropertyName !== 'Id'">
                                        <td>
                                            {{ item[column.PropertyName] }}
                                        </td>
                                    </template>
                                    <td class="table_opt2">
                                        <button data-toggle="modal" @click="openColumns(item)" class="btn btn-link" type="button">
                                            <i class="mdi mdi-lead-pencil"></i> 配列
                                        </button>
                                        <button data-toggle="modal" @click="openEditDiv(item)" data-target="#gridSystemModal" class="btn btn-link" type="button">
                                            <i class="mdi mdi-lead-pencil"></i> 修改
                                        </button>
                                        <button data-toggle="modal" @click="deleteAndConfirm(item)" data-target="#divDelBox" class="btn btn-link" type="button">
                                            <i class="mdi mdi-do-not-disturb"></i> 删除
                                        </button>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                @@page_control.html
            </div>
        </div>
    </div>
    <!--插入或者新增-->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModal" style="display: none;">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">{{title}}</h4>
                </div>
                <div class="modal-body">
                    <form id="frmEdit">
                        <input type="hidden" v-model="formData.Id" name="Id" />
                        <div class="form-group">
                            <label class="control-label">实体名：</label>
                            <input type="text" placeholder="类的名字" @input="classNameInput" @change="classNameInput" v-model="formData.ClassName" name="ClassName" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">表名：</label>
                            <input type="text" placeholder="数据库中表的名称" v-model="formData.DbTableName" name="DbTableName" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">数据库：</label>
                            <select readonly v-model="formData.DataBaseId" name="DataBaseId" class="form-control">
                                <option v-for="item in  database" v-bind:value="item.Id"> {{item.Name}} </option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="control-label">表备注：</label>
                            <textarea placeholder="数据库中表的备注" class="form-control" v-model="formData.Description" name="Description" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnCloseEdit" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="addOrUpdate()" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--表结构对比-->
    <div id="divCompareDatabaseStructure" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnCompareDatabaseStructure" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divCompareDatabaseStructure"></button>
        <div class="modal-dialog  " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">同步表结构</h4>
                </div>
                <div class="modal-body" v-html="columnsCompareResult">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="createTables()" class="btn btn-primary">同步表结构</button>
                </div>
            </div>
        </div>
    </div>
    <!--编辑列-->
    <div id="divEditColumns" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnEditColumns" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divEditColumns"></button>
        <div class="modal-dialog modal-lg  width1200" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">{{editTable}} </h4>
                </div>

                <div class="modal-body">
                    <div class="table-container">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>实体属性</th>
                                    <th>列名</th>
                                    <th width="200">C#类型</th>
                                    <th>备注</th>
                                    <th width="50">可空</th>
                                    <th width="50">主键</th>
                                    <th width="50">自增</th>
                                    <th width="250">
                                        <a class="btn  btn-secondary m-r-5" @click="openCopy" href="#!"><i class="mdi mdi-content-copy"></i> 复制列</a>
                                        <a class="btn  btn-secondary m-r-5" href="#!" onclick="alert('开发中')"><i class="mdi mdi-lead-pencil"></i> 配置索引</a>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in columns" :key="index">
                                    <td scope="row">
                                        <input v-model="item.Id" type="hidden" />
                                        <input v-model="item.PropertyName" class="form-control" placeholder="必填" type="text" />
                                    </td>
                                    <td><input v-model="item.DbColumnName" class="form-control" placeholder="可空:默认取属性名" type="text" /></td>
                                    <td>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <select v-model="item.PropertyType" class="form-control width100">
                                                    <option v-for="item in  nativeTypes" :value="item.Value"> {{item.Name}} </option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <a class="btn btn-link" @click="openEditNativeType(item)">配置<span v-if="item.DataType"> <i class="mdi mdi-lead-pencil"></i> </span></a>
                                            </div>
                                        </div>
                                    </td>
                                    <td><input v-model="item.Description" class="form-control" placeholder="" type="text" /></td>
                                    <td><input v-model="item.IsNullable" type="checkbox" class="form-control" /></td>
                                    <td><input v-model="item.IsPrimarykey" type="checkbox" class="form-control" /></td>
                                    <td><input v-model="item.IsIdentity" type="checkbox" class="form-control" /></td>
                                    <td>
                                        <span @click="pushColumns(item)" class="pointer m-r-10"><i class="mdi mdi-plus"></i>添加</span>
                                        <span @click="removeColumns(index)" class="pointer"><i class="mdi  mdi-window-close"></i>删除</span>
                                        <span @click="move(index,true)" class="pointer"><i class="mdi  mdi-arrow-up"></i>上移</span>
                                        <span @click="move(index,false)" class="pointer"><i class="mdi mdi-arrow-down"></i>下移</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="addOrUpdateColumnInfoSubmit()" class="btn btn-primary">点击保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--复制列-->
    <div id="divCopy" class="modal fade bs-example-modal-sm inC" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnCopy" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divCopy"></button>
        <div class="modal-dialog modal-sm  border3CCC width500" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">复制列</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="alert alert-success">技巧: 建一个只有 创建时间、创建人 这样的表 作为模版表</div>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">表名：</label>
                        <input v-model="tableName" @change="changeTable" class="form-control" list="browsers" name="joinTable">
                        <datalist id="browsers">
                            <option v-if="allTables&&allTables.length>0" v-for="item in allTables" :value="item.Name">{{item.Name}}</option>
                        </datalist>
                        <button class="btn btn-xs btn-primary removedatalist" @click="clearTable"><i class="mdi mdi-do-not-disturb"></i>删除选定项</button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnCloseCopy" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="submitCopy" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--导入实体-->
    <div id="divImportEntity" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnImportEntity" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divImportEntity"></button>
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">导入实体</h4>
                </div>
                <div class="modal-body">

                    <div class="input-group width250  m-b-10">
                        <input id="txtTableName" type="text" class="form-control">
                        <span class="input-group-btn">
                            <button type="button" @click="bindImportTables()" class="btn btn-default"><i class="mdi mdi-magnify"></i>搜索</button>
                            <button type="button" onclick="txtTableName.value=''" class="btn btn-default"><i class="mdi  mdi-refresh"></i>清空</button>
                        </span>
                    </div>

                    <div class="table-container2">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="width30">
                                        <label class="lyear-checkbox checkbox-primary">
                                            <input type="checkbox" @change="selectAllTables" id="check-all2"><span></span>
                                        </label>
                                    </th>
                                    <th>
                                        索引号
                                    </th>
                                    <th>
                                        表名
                                    </th>
                                    <th>描述</th>
                                </tr>
                            </thead>
                            <tbody v-if="tables">
                                <tr v-for="(item,index) in tables">
                                    <td>
                                        <input type="checkbox" name="ids[]" v-model="selectedTables" :alt="item.Name" :value="item.Name">
                                    </td>
                                    <td>{{index+1}}</td>
                                    <td>
                                        {{ item.Name }}
                                    </td>
                                    <td>
                                        {{ item.Description  }}
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnImportEntityClose" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="importEntitySubmit()" class="btn btn-primary">导入表</button>
                </div>
            </div>
        </div>
    </div>
    <!--SQL工具-->
    <div id="divDatabaseTool" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnDatabaseTool" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divDatabaseTool"></button>
        <div class="modal-dialog  width_r_80 " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">简化版SQL工具</h4>
                </div>
                <div class="modal-body">
                    <div id="divAceEditor" style="width: 100%; height: calc(50vh - 150px) "> </div>
                    <button @click="executeSql" class="btn btn-danger m-10 m-b-0"><i class="mdi mdi-play-circle-outline"></i>运行</button>
                    <button @click="executeSqlRegurnExcel" class="btn btn-success m-10 m-b-0"><i class="mdi mdi-file-excel"></i>下载</button>
                    <button @click="clearSql" class="btn btn-cyan m-10 m-b-0"><i class="mdi-restart mdi"></i>清空</button>
                    <div id="divAceEditorResult" style="width: 100%; height: calc(50vh - 150px)"> </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnDatabaseTooClose" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!--通用配置-->
    <div id="divSetting" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnSetting" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divSetting"></button>
        <div class="modal-dialog  width300 " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">个性化配置</h4>
                </div>
                <div class="modal-body">
                    <div class="example-box">
                        <label class="lyear-checkbox">
                            <input type="checkbox" v-model="setting.importUnunderline" value="true">
                            <span class="p-l-15">导入实体去掉下划线</span>
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnSettingClose" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" @click="saveSetting()" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--代码生成-->
    <div id="divGenerateFile" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnGenerateFile" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divGenerateFile"></button>
        <div class="modal-dialog  width300 " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">代码生成</h4>
                </div>
                <div class="modal-body">
                    <div class="example-box">
                        <div class=" form-group">
                            <label class="control-label">
                                模版
                            </label>
                            <select v-model="currentTemplateId" @change="changeTemplate" class="form-control">
                                <option v-for="item in templates" :value="item.Id">
                                    {{item.Title}}
                                </option>
                            </select>
                        </div>
                        <div class=" form-group" v-if="isView">
                            <label class="control-label">
                                视图名 <span class="red">*</span>
                            </label>
                            <input v-model="viewName" class="form-control" placeholder="视图名字" value="" />
                        </div>
                        <div class=" form-group">
                            <label class="control-label">
                                生成地址
                            </label>
                            <div><code>地址说明:修改模版可以修改这个地址</code> <a class="red" :href="tempUrl">[进入模版管理]</a></div>
                            <div><code>符号说明:{0}是ClassName, {1}表示TableName,{project}表示项目的sln文件目录</code></div>
                            <input class="form-control" v-model="currentTemplate.Url" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnGenerateFileClose" class="btn btn-default" data-dismiss="modal"><i class="mdi mdi-close"></i>关闭</button>
                    <button type="button" @click="previewEntity()" class="btn btn-primary"> <i class="mdi mdi-eye"></i>预览实体</button>
                    <button type="button" @click="submitGenerateFile()" class="btn btn-primary"><i class="mdi mdi-file"></i>生成文件</button>
                </div>
            </div>
        </div>
    </div>
    <!--修改原生类型-->
    <div id="divEditNativeType" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnEditNativeType" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divEditNativeType"></button>
        <div class="modal-dialog border3CCC  width300 " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">修改原生类型</h4>
                </div>
                <div class="modal-body">
                    <div class="example-box">
                        <div class="form-group">
                            <label class="control-label">类型</label>
                            <div><code>注意:这儿有配置不支持多库，一般用于单库或者导入</code></div>
                            <input v-model="currentColumn.DataType" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">长度</label>
                            <input v-model="currentColumn.Length" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label class="control-label">精度</label>
                            <input v-model="currentColumn.DecimalDigits" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--预览实体-->
    <div id="divPreviewEntity" class="modal fade bs-example-modal-lg" tabindex="-11" role="dialog" aria-labelledby="myLargeModalLabel" style="display: none;">
        <button id="btnPreviewEntity" type="button" class="btn btn-primary hidden" data-toggle="modal" data-target="#divPreviewEntity"></button>
        <div class="modal-dialog  width_r_80 " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myLargeModalLabel">预览实体</h4>
                </div>
                <div class="modal-body ">
                    <code>双击可以全选，预览只显示一个实体</code>
                    <pre @dblclick="selectText" id="preReviewClass" style="height:380px !important" >{{reviewClass}}</pre>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnClosePreviewEntity" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var vueObj = new Vue({
        el: '#apibox',
        data: {
            databaseId: 0,
            data: null,
            error: null,
            addTitle: "添加实体",
            editTitle: "修改实体",
            title: "",
            sort: 0,
            sortName: null,
            sortClass: "",
            editTable: "",
            formData: {},
            database: [],
            nativeTypes: [],
            selectedItems: [],
            selectedTables: [],
            columns: [{}],
            currentColumn: {},
            columnsCompareResult: null,
            tables: [],
            allTables: [],
            tableName: null,
            editTableId: 0,
            setting: {
                importUnunderline: false
            },
            templates: [],
            currentTemplate: {},
            currentTemplateId: 0,
            isView: false,
            viewName: null,
            tempUrl: "/rezero/template.html",
            reviewClass:null
        },
        mounted() {
            this.bindDatabaseSelect();
            this.bindNativeTypeSelect();
            this.bindTemplates();
            this.bindTempUrl();
        },
        methods: {
            fetchData(append) {
                var url = "/PrivateReZeroRoute/100003/GetEntityInoList?random=1" + append;
                axios.get(url, jwHeader)
                    .then(response => {
                        this.data = response.data;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            bindTempUrl: function () {
                var urlParams = new URLSearchParams(window.location.search);
                var model = urlParams.get('model');
                var token = urlParams.get('token');
                if (model) {
                    this.tempUrl += `?model=${model}`;
                }
                if (token) {
                    this.tempUrl += model ? `&token=${token}` : `?token=${token}`;
                }
            },
            onSearch: function (page) {

                var urlParameters = "&" + tools.objectToQueryString({
                    ClassName: txtSearch.value,
                    __pageNumber: page, 
                   __pageSize: tools.getValue("selPageSize"),
                    DataBaseId: selDataBaseId.value,
                    OrderByType: this.sort,
                    OrderByName: this.sortName
                });
                this.fetchData(urlParameters);
            },
            deleteAndConfirm: function (item) {
                if (item == null) {
                    var url = "/PrivateReZeroRoute/100003/DeleteEntityInfo?IsDeleted=true&Id=" + localStorage.delId;
                    axios.get(url, jwHeader)
                        .then(response => {
                            if (response.data.message) {
                                tools.alert(response.data.message);
                            }
                            this.error = null;
                            this.onSearch();
                            btnDelClose.click();
                        })
                        .catch(error => {
                            this.error = error.message;
                            this.data = null;
                        });
                } else {
                    localStorage.delId = item.Id;
                }
            },
            openEditDiv: function (item) {
                var urlById = "/PrivateReZeroRoute/100003/GetEntityInfoById?id=" + item.Id;
                if (item.Id) {
                    this.title = this.editTitle;
                    axios.get(urlById, jwHeader)
                        .then(response => {
                            this.formData = response.data;
                        })
                        .catch(error => {
                            this.error = error.message;
                            this.data = null;
                        });
                }
            },
            openAddDiv: function (item) {
                this.title = this.addTitle;
                this.formData = { DataBaseId: this.databaseId };
            },
            addOrUpdate: function () {
                var th = this;
                var frmId = "frmEdit";
                var json = this.formData;
                var url = json.Id ?
                    "/PrivateReZeroRoute/100003/UpdateEntityInfo" :
                    "/PrivateReZeroRoute/100003/AddEntityInfo";
                this.addOrUpdateSubmit(url, json);
            },
            addOrUpdateSubmit: function (url, json) {
                var th = this;
                axios.post(url, json, jwHeader)
                    .then(response => {
                        this.error = null;
                        this.onSearch();
                        if (response.data == true) {
                            frmEdit.reset();
                            btnCloseEdit.click();
                        }
                        else {
                            tools.highlightErrorFields(response.data)
                        }
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            bindDatabaseSelect: function () {
                axios.get("/PrivateReZeroRoute/100004/GetDatabaseInfoAllList", jwHeader)
                    .then(response => {
                        this.database = response.data;
                        this.databaseId = this.database[0].Id;
                        var th = this;
                        setTimeout(function () {
                            th.onSearch();
                        }, 50);
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            bindNativeTypeSelect: function () {
                axios.get("/PrivateReZeroRoute/100004/GetNativeTypeList", jwHeader)
                    .then(response => {
                        this.nativeTypes = response.data;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            openColumns: function (item) {
                btnEditColumns.click();
                this.editTableId = item.Id;
                this.editTable = item.ClassName + " -  " + item.DataBaseName;
                var url = "/PrivateReZeroRoute/100003/GetEntityColuminsByEntityId?TableId=" + item.Id;
                axios.get(url, jwHeader)
                    .then(response => {
                        this.columns = response.data;
                        if (this.columns.length == 0) {
                            this.columns.push({ TableId: item.Id });
                        }
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            openEditNativeType: function (item) { 
                this.currentColumn = item;
                btnEditNativeType.click();
            },  
            removeColumns: function (index) {
                this.columns.splice(index, 1);
            },
            addOrUpdateColumnInfoSubmit: function () {
                var url = "/PrivateReZeroRoute/100003/SaveEntityColumnInfos"
                var th = this;
                axios.post(url, { Columns: this.columns }, jwHeader)
                    .then(response => {
                        this.error = null;
                        if (response.data == true) {
                            tools.alert("保存成功");
                            th.onSearch(1);
                        }
                        else {
                            tools.alert(response.data);
                        }
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            pushColumns: function (item) {
                this.columns.push({ TableId: item.TableId, IsNullable: true });
            },
            openCompareDatabaseStructure: function () {
                if (!this.selectedItems || this.selectedItems.length == 0) {
                    tools.alert("请选择实体");
                    return;
                }
                btnCompareDatabaseStructure.click();
                var url = " /PrivateReZeroRoute/100003/CompareDatabaseStructure";
                axios.post(url, { ids: this.selectedItems }, jwHeader)
                    .then(response => {
                        this.columnsCompareResult = response.data;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            // 其他方法...
            previewEntity: function () {
                //if (!this.selectedItems || this.selectedItems.length == 0) {
                //    tools.alert("请选择实体");
                //    return;
                //}
                if (this.isView && !this.viewName)
                {
                    tools.alert("请填写视图名");
                    return;
                }
                var tableId = this.selectedItems[0];
                var url = `/PrivateReZeroRoute/100003/ViewTemplate?databaseId=${this.databaseId}&viewName=${this.isView ? this.viewName : tableId}&templateId=${this.currentTemplateId}&isView=${this.isView}`;
                axios.get(url, jwHeader)
                    .then(response => {
                        btnGenerateFileClose.click();
                        btnPreviewEntity.click();
                        this.reviewClass=response.data; 
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            selectText(event) {
                // 方法1：使用现代浏览器的 Selection API
                const range = document.createRange();
                range.selectNodeContents(event.target);
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
            },
            createTables: function () {
                var url = "/PrivateReZeroRoute/100003/CreateTables";
                this.columnsCompareResult = "同步中....";
                axios.post(url, { ids: this.selectedItems }, jwHeader)
                    .then(response => {
                        this.columnsCompareResult = response.data == true ? "同步成功" : response.data.message;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            openImportEntity: function () {
                btnImportEntity.click();
                this.bindImportTables();
            },
            importEntitySubmit: function () {
                var url = " /PrivateReZeroRoute/100003/ImportEntities";
                var th = this;
                axios.post(url, { databasdeId: this.databaseId, tableNames: this.selectedTables }, jwHeader)
                    .then(response => {
                        this.error = null;
                        if (response.data == true) {
                            btnImportEntityClose.click();
                            th.onSearch(1);
                            th.selectedTables = [];
                            document.getElementById('check-all2').checked = false;
                            tools.alert("导入成功，删除实体可以重新导入。");
                        }
                        else {
                            tools.alert(response.data.message);
                        }
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            changeDatabase: function () {
                this.onSearch();
            },
            bindImportTables: function () {
                var url = "/PrivateReZeroRoute/100004/GetImportTables?databaseId=" + this.databaseId + "&tableName=" + txtTableName.value;
                axios.get(url, jwHeader)
                    .then(response => {
                        this.tables = response.data;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            bindAllTables: function () {
                var url = "/PrivateReZeroRoute/100004/GetAllTables?databaseId=" + this.databaseId;
                axios.get(url, jwHeader)
                    .then(response => {
                        this.allTables = response.data;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            selectAll(event) {
                if (event.target.checked) {
                    // 全选
                    this.selectedItems = this.data.Data.map(item => item.Id);
                } else {
                    // 全不选
                    this.selectedItems = [];
                }
            },
            selectAllTables(event) {
                if (event.target.checked) {
                    // 全选
                    this.selectedTables = this.tables.map(item => item.Name);
                } else {
                    // 全不选
                    this.selectedTables = [];
                }
            },
            classNameInput: function () {
                this.formData.DbTableName = this.formData.ClassName;
            },
            move: function (index, tyep) {
                if (tyep) {
                    if (index == 0) {
                        return;
                    }
                    var temp = this.columns[index];
                    this.columns.splice(index, 1);
                    this.columns.splice(index - 1, 0, temp);
                }
                else {
                    if (index == this.columns.length - 1) {
                        return;
                    }
                    var temp = this.columns[index];
                    this.columns.splice(index, 1);
                    this.columns.splice(index + 1, 0, temp);
                }
            },
            sortAsc: function () {
                this.sort = 0;
                this.sortName = "ClassName";
                this.sortClass = "sort-asc";
                this.onSearch(1);
            },
            sortDesc: function () {
                this.sort = 1;
                this.sortName = "ClassName";
                this.sortClass = "sort-desc";
                this.onSearch(1);
            },
            openCopy: function () {
                this.bindAllTables();
                btnCopy.click();
            },
            submitCopy: function () {
                var tableName = this.tableName;
                var table = this.allTables.find(table => table.Name === tableName);
                var tableId = table ? table.Id : null;
                if (tableId == null) {
                    tools.alert("请选择表");
                    return;
                }
                var editId = this.editTableId;
                var url = "/PrivateReZeroRoute/100003/GetEntityColuminsByEntityId?TableId=" + tableId;
                axios.get(url, jwHeader)
                    .then(response => {
                        response.data.forEach(item => {
                            item.TableId = editId;
                            item.Id = 0;
                            this.columns.push(item);
                            btnCloseCopy.click();
                        });
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            changeTable: function () {

            },
            clearTable: function () {
                this.tableName = null;
            },
            executeSql: function () {
                var editor = ace.edit("divAceEditor");
                var sql = editor.getValue("\r\n");
                var url = "/PrivateReZeroRoute/100003/ExecuetSql";
                axios.post(url, { databaseId: this.databaseId, sql: sql }, jwHeader)
                    .then(response => { 
                        var editorResult = ace.edit("divAceEditorResult");
                        editorResult.setValue(JSON.stringify(response.data, null, 4)); 
                        editorResult.selection.clearSelection();
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            executeSqlRegurnExcel: function () {
                var editor = ace.edit("divAceEditor");
                var sql = editor.getValue("\r\n");
                var th = this;
                axios.get("/PrivateReZeroRoute/100003/ExecuetSqlReturnExcel", {
                    params: { 
                        databaseId: this.databaseId, sql: sql
                    },
                    responseType: 'blob',
                    headers: jwHeader.headers
                })
                    .then(function (response) {
                        // 创建一个 Blob 对象，指向数据的 URL  
                        var url = window.URL.createObjectURL(new Blob([response.data]));
                        var link = document.createElement('a');
                        link.href = url;

                        // 设置下载文件的名称，可以根据实际情况调整  
                        var fileName = 'sql.xlsx';
                        link.setAttribute('download', fileName);

                        // 触发下载  
                        document.body.appendChild(link);
                        link.click();

                        // 清理资源  
                        window.URL.revokeObjectURL(link.href);
                        document.body.removeChild(link);
                    })
                    .catch(function (error) {
                        console.error("Error downloading the Excel file:", error);
                    });
            },
            openSqlTool: function () {
                var editor = ace.edit("divAceEditor");
                editor.setOption("showPrintMargin", false);
                editor.setTheme("ace/theme/twilight"); // 设置主题
                editor.getSession().setMode("ace/mode/sql"); // 设置语言模式为SQL
                editor.setOption("enableBasicAutocompletion", true);
                editor.setOption("enableSnippets", true);
                editor.setOption("enableLiveAutocompletion", true)
                editor.setValue("\r\n");
                editor.selection.clearSelection();
                this.bindSqlResult();
                btnDatabaseTool.click();
            },
            clearSql: function() {
                var editor = ace.edit("divAceEditor");
                editor.setValue("\r\n");
                editor.selection.clearSelection();

                var editorResult = ace.edit("divAceEditorResult");
                editorResult.setValue("\r\n");
                editorResult.selection.clearSelection()
            },
            bindSqlResult: function ()
            {
                var editor = ace.edit("divAceEditorResult");
                editor.setOption("showPrintMargin", false);
                editor.setTheme("ace/theme/twilight"); // 设置主题
                editor.getSession().setMode("ace/mode/json5"); // 设置语言模式为SQL
                editor.setOption("enableBasicAutocompletion", true);
                editor.setOption("enableSnippets", true);
                editor.setOption("enableLiveAutocompletion", true)
                editor.setValue("\r\n");
                editor.selection.clearSelection();
            },
            openSetting: function ()
            {
                btnSetting.click();
                this.getSettingItem(1, 1);
               
            },
            saveSetting: function () {

                this.saveSettingItem(1, 1, this.setting.importUnunderline);
            },
            exportExcel: function () {
                var th = this;
                axios.get("/PrivateReZeroRoute/100003/ExportEntities", {
                    params: {
                        tableIds: JSON.stringify(this.selectedItems),
                        DataBaseId: this.databaseId
                    },
                    responseType: 'blob',
                    headers: jwHeader.headers
                })
                    .then(function (response) {
                        // 创建一个 Blob 对象，指向数据的 URL  
                        var url = window.URL.createObjectURL(new Blob([response.data]));
                        var link = document.createElement('a');
                        link.href = url;

                        // 设置下载文件的名称，可以根据实际情况调整  
                        var fileName = $("#selDataBaseId option:selected").text() + '.xlsx'; 
                        link.setAttribute('download', fileName);

                        // 触发下载  
                        document.body.appendChild(link);
                        link.click();

                        // 清理资源  
                        window.URL.revokeObjectURL(link.href);
                        document.body.removeChild(link); 
                    })
                    .catch(function (error) {
                        console.error("Error downloading the Excel file:", error);
                    });
            },
            getSettingItem: function (typeId, childTypeId)
            {
                var url = "/PrivateReZeroRoute/100003/GetSetting";
                var th = this;
                axios.post(url, { typeId: typeId, childTypeId: childTypeId }, jwHeader)
                    .then(response => {
                        th.setting.importUnunderline = response.data.BoolValue;
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            saveSettingItem: function (typeId, childTypeId,value) {
                var url = "/PrivateReZeroRoute/100003/UpdateSetting";
                axios.post(url, { typeId: typeId, childTypeId: childTypeId, value: value }, jwHeader)
                    .then(response => {
                        tools.alert("保存成功"); 
                        btnSettingClose.click();
                        this.error = null;
                    })
                    .catch(error => {
                        this.error = error.message;
                        this.data = null;
                    });
            },
            openGenerateCode: function () {
                if (!this.selectedItems || this.selectedItems.length == 0) {
                    tools.alert("请选择实体");
                    return;
                }
                this.isView = false;
                this.viewName = null;
                btnGenerateFile.click();
            },
            openGenerateCodeByView: function () {
            
                this.isView = true;
                btnGenerateFile.click();
            },
            submitGenerateFile: function () {
                if (this.isView && !this.viewName)
                {
                    tools.alert("视图名不能为空");
                    return;
                }
                var url = "/PrivateReZeroRoute/100003/ExecTemplateByTableIds";
                axios.post(url, {
                    TableIds: JSON.stringify(this.selectedItems),
                    DataBaseId: this.databaseId,
                    TemplateId: this.currentTemplate.Id,
                    Url: this.currentTemplate.Url,
                    ViewName: this.viewName
                }, jwHeader)
                    .then(response => {
                        if (response.data && response.data.message){
                            tools.alert("生成出错:" + response.data.message);
                        } else {
                            tools.alert("已生成到目录" + response.data);
                        }
                    })
                    .catch(error => {
                        this.error = error.message;
                    });
            },
            bindTemplates: function ()
            {
                var th = this;
                var url = "/PrivateReZeroRoute/100003/GetTemplateListByTypeId?typeId=1";
                axios.get(url, jwHeader)
                    .then(response => {
                        th.templates = response.data; 
                        th.currentTemplate = th.templates[0];
                        th.currentTemplateId = th.templates[0].Id;
                    })
                    .catch(error => {
                        th.error = error.message;
                    });
            },
            changeTemplate: function (template)
            {
                this.currentTemplate = this.templates.find(item => item.Id === this.currentTemplateId); 
            }
        }
    });
</script>