transfer-server/SuperAPI/wwwroot/rezero/default_ui/interface_manager.html

@@master_page.html
<link
	href="css/page_table_list.css"
	rel="stylesheet"
/>
<link
	href="css/page_interface_manager.css"
	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"
>
	<!--主列表搜索-->
	<div class="search-bar">
		<form
			id="frmSearach"
			action="lyear_forms_elements.html"
			method="post"
			onsubmit="return false;"
		>
			<div class="form-group">
				<div class="row">
					<div class="col-md-1">
						<label class="form-control">数据库:</label>
					</div>
					<div class="col-md-2">
						<select
							@change="changeDatabase"
							v-model="databaseId"
							id="selDatabase"
							class="form-control"
						>
							<option
								v-for="item in database"
								:value="item.Id"
							>
								{{item.Name}}
							</option>
						</select>
					</div>
					<div class="col-md-2">
						<input
							class="form-control"
							type="text"
							id="txtName"
							name="example-text-input"
							placeholder="接口名 或者 URL"
						/>
					</div>
					<div class="col-md-2">
						<select
							id="selGroupName"
							class="form-control"
						>
							<option value="">==分组==</option>
							<option v-for="item in groupList">{{item.GroupName}}</option>
						</select>
					</div>
					<div class="col-md-2">
						<select
							id="selInterfaceCategoryId"
							class="form-control"
						>
							<option value="">==分类==</option>
							<option
								v-for="item in interfaceCategroyList"
								:value="item.Id"
							>
								{{item.Name}}
							</option>
						</select>
					</div>
					<div class="col-md-3">
						<button
							@click="onSearch()"
							id="btnSearch"
							class="btn btn-secondary"
						>
							<i class="mdi mdi-magnify"></i>搜索
						</button>
						<button
							onclick="frmSearach.reset()"
							class="btn btn-close m-l-15"
							type="submit"
						>
							清空
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<!--主表列表操作按钮-->
	<div class="card-toolbar clearfix">
		<div class="toolbar-btn-action">
			<a
				class="btn btn-primary m-r-5"
				@click="openNext()"
				href="#!"
				><i class="mdi mdi-plus"></i> 新增</a
			>
			<a
				class="btn btn-success m-r-10"
				@click="openGenerateCode()"
				data-toggle="tooltip"
				data-original-title="根据实体生成文件"
				href="#!"
				><i class="mdi mdi-web"></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>
							<th v-for="column in data.Columns">
								{{column.ColumnDescription}}
							</th>
							<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>
							<td v-for="column in data.Columns">
								{{ item[column.PropertyName] }}
							</td>

							<td class="table_opt">
								<button
									data-toggle="modal"
									@click="openEdit(item)"
									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>
	</div>
	<!--分页局部视图-->
	@@page_control.html
	<!--创建接口第一步：选择接口分类-->
	<div
		class="modal fade"
		tabindex="-1"
		role="dialog"
		aria-labelledby="gridSystemModalLabel"
		id="divBefore"
		style="display: none"
	>
		<button
			id="btnNext"
			type="button"
			class="btn btn-primary hidden"
			data-toggle="modal"
			data-target="#divBefore"
		></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="exampleModalLabel"
					>
						接口类型
					</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>
							<select
								v-model="databaseId"
								readonly="readonly"
								id="selDataBaseId"
								class="form-control"
							>
								<option
									v-for="item in  database"
									v-bind:value="item.Id"
								>
									{{item.Name}}
								</option>
							</select>
							<label class="control-label">分类</label>
							<select
								v-model="currentActionType"
								id="selTextGroup"
								class="form-control"
							>
								<option
									v-for="item in actionList"
									:value="item"
								>
									{{item.TextGroup}}
								</option>
							</select>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						id="btnNextClose"
						class="btn btn-default"
						data-dismiss="modal"
					>
						关闭
					</button>
					<button
						type="button"
						@click="openAdd()"
						class="btn btn-primary"
					>
						下一步
					</button>
				</div>
			</div>
		</div>
	</div>
	<!--创建接口主窗体：填写接口详细信息-->
	<div
		id="divSave"
		class="modal fade bs-example-modal-lg"
		tabindex="-1"
		role="dialog"
		aria-labelledby="myLargeModalLabel"
		style="display: none"
	>
		<button
			id="btnSave"
			type="button"
			class="btn btn-primary hidden"
			data-toggle="modal"
			data-target="#divSave"
		></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"
					>
						{{title}}
					</h4>
				</div>

				<div class="modal-body">
					<div class="table-container">
						<div class="card">
							<ul class="nav nav-tabs page-tabs">
								<li
									v-for="(item,index) in currentActionType.Items"
									@click="interfaceListTabClick(index,item)"
									:class="index==tabIndex?'active':''"
								>
									<a href="#!">{{item.Text}}</a>
								</li>
							</ul>
							<div class="tab-content tabbox">
								<div class="tab-pane active">
									<form
										id="frmSave"
										action="#!"
										method="post"
										name="edit-form"
										class="edit-form"
									>
										<input
											v-model="editId"
											type="hidden"
											value="0"
										/>
										<div
											v-for="item in currentActionTypeContext.FormElements"
											class="form-group col-md-12"
										>
											<label v-if="item.ElementType!=5"
												>{{item.Text}}<span
													class="red"
													v-if="item.IsRequired"
													>*</span
												></label
											>
											<div class="form-controls">
												<!--text-->
												<template v-if="item.ElementType==0">
													<input
														:name="item.Name"
														:placeholder="item.Placeholder"
														v-model="item.Value"
														:validate-data="JSON.stringify(item)"
														class="form-control"
													/>
												</template>
												<!--table-->
												<template v-if="item.ElementType==1">
													<div class="input-group">
														<input
															:name="item.Name"
															:placeholder="item.Placeholder"
															v-model="item.Value"
															:validate-data="JSON.stringify(item)"
															type="text"
															readonly="readonly"
															class="form-control"
														/>
														<span class="input-group-btn">
															<button
																@click="openImportEntity(item)"
																class="btn btn-default"
																type="button"
															>
																选择表
															</button>
														</span>
													</div>
												</template>
												<!--Columns-->
												<template v-if="item.ElementType==3">
													<span
														@click="openAddColumn(item)"
														class="btn btn-primary m-tb-10"
													>
														<i class="mdi mdi-settings"></i> 配置主表列
													</span>
													<span
														@click="openAddComplexityColumn(item)"
														class="btn btn-success m-tb-10"
													>
														<i class="mdi mdi-plus"></i> 追加复杂列
													</span>
													<span
														@click="openOrderByColumn(item)"
														class="btn btn-purple m-tb-10"
													>
														<i class="mdi mdi-settings"></i> 配置排序
													</span>
													<span
														@click="openWhere(item)"
														class="btn btn-warning m-tb-10"
													>
														<i class="mdi mdi-settings"></i> 配置条件
													</span>
													<p>
														<code
															>排序：{{selectedOrderByString}} {{
															selectedOrderBys_EnableSort==false ? "":
															"["+selectedOrderBys_EnableSort+"]" }}
														</code>
													</p>
													<p
														v-if="selectedWheres.filter(item => item.PropertyName).length>0"
													>
														<code
															>条件：{{selectedWheres.filter(item =>
															item.PropertyName ).length}}
														</code>
													</p>
													<p
														v-if="selectedWheres.filter(item => item.PropertyName).length==0"
													>
														<code>条件：{{selectedWhereString}}</code>
													</p>
													<table class="table table-bordered m-b-0">
														<thead>
															<tr>
																<th>列名</th>
																<th>显示名称</th>
																<th>排序号</th>
																<th>删除</th>
															</tr>
														</thead>
														<tbody>
															<tr v-for="item in selectedColumns">
																<td>{{item.PropertyName}}</td>
																<td>{{item.DbColumnName}}</td>
																<td>{{item.SortId}}</td>
																<td>
																	<button
																		@click="deleteSelectedColumn(item)"
																		type="button"
																		class="btn btn-link"
																	>
																		<i class="mdi mdi-do-not-disturb"></i> 删除
																	</button>
																</td>
															</tr>
															<tr v-for="item in selectedComplexityColumns">
																<td>{{item.PropertyName}}</td>
																<td>{{item.DbColumnName}}</td>
																<td>{{item.SortId}}</td>
																<td>
																	<button
																		@click="deleteComplexitySelectedColumn(item)"
																		type="button"
																		class="btn btn-link"
																	>
																		<i class="mdi mdi-do-not-disturb"></i> 删除
																	</button>
																</td>
															</tr>
														</tbody>
													</table>
													<input
														:name="item.Name"
														type="hidden"
														:placeholder="item.Placeholder"
														v-model="item.Value"
														:validate-data="JSON.stringify(item)"
														class="form-control"
													/>
												</template>
												<!--Select-->
												<template v-if="item.ElementType==4">
													<select
														:name="item.Name"
														v-model="item.Value"
														:validate-data="JSON.stringify(item)"
														class="form-control"
													>
														<option
															v-if="item.SelectDataSource"
															v-for="o in item.SelectDataSource"
															:value="o.Key"
														>
															{{o.Value}}
														</option>
													</select>
												</template>
												<!--Hidden-->
												<template v-if="item.ElementType==5">
													<input
														:name="item.Name"
														v-model="item.Value"
														type="hidden"
														:validate-data="JSON.stringify(item)"
														class="form-control"
													/>
												</template>
												<!--Page-->
												<template v-if="item.ElementType==6">
													<label class="lyear-checkbox t_a_l"
														><input
															v-model="item.Value"
															:name="item.Name"
															value="true"
															type="checkbox"
														/>
														<span class="p-l-15">是否分页</span></label
													>
												</template>
												<!--SqlTest-->
												<template v-if="item.ElementType==7">
													<p>
														<code
															>接口参数：{string:name} 等于
															@name=string类型的参数
															，C#类型有string、int、DateTime等</code
														>
													</p>
													<p>
														<code
															>授权参数：{ClaimKey:OrgId} 等于
															你授权的Claim[OrgId]</code
														>
													</p>
													<textarea
														rows="10"
														style="display: none"
														:placeholder="item.Placeholder"
														:name="item.Name"
														v-model="item.Value"
														class="form-control"
													></textarea>
													<div
														id="divAceEditor"
														style="width: 100%; height: 300px"
													></div>
												</template>
												<!--DefaultValueColumns-->
												<template v-if="item.ElementType==8">
													<span
														class="btn btn-primary m-b-10"
														@click="openDefaultValue"
														><i class="mdi-account-settings-variant mdi"></i>
														配置
													</span>
													<textarea
														rows="5"
														class="form-control"
														readonly="readonly"
													>
{{saveDefaultValueColumns}}</textarea
													>
												</template>
												<!--UpdateColumns-->
												<template v-if="item.ElementType==9">
													<input
														v-model="item.Value"
														type="hidden"
														:name="item.Name"
													/>
													<select
														id="selUpdateColumns"
														@change="setUpdateColums(item)"
														multiple
														class="form-control"
													>
														<option v-for="childItem in updateColumns">
															{{childItem.PropertyName}}
														</option>
													</select>
												</template>
												<!--UpdateResultType-->
												<template v-if="item.ElementType==10">
													<select
														v-model="item.Value"
														:name="item.Name"
														class="form-control"
													>
														<option
															selected
															value="1"
														>
															默认
														</option>
														<option value="2">受影响行数</option>
													</select>
												</template>
												<!--InsertResultType-->
												<template v-if="item.ElementType==12">
													<select
														v-model="item.Value"
														:name="item.Name"
														class="form-control"
													>
														<option
															selected
															value="1"
														>
															默认
														</option>
														<option value="4">自增列(只支持int)</option>
													</select>
												</template>
												<!--Where-->
												<template v-if="item.ElementType==11">
													<div
														v-if="item.Placeholder"
														class="alert-success p-10"
													>
														{{item.Placeholder}}
													</div>
													<span
														@click="openMiniWhere(item)"
														class="btn btn-primary m-tb-10"
													>
														<i class="mdi mdi-settings"></i> 配置条件
													</span>
													<span
														@click="showWherePreview"
														class="btn btn-info"
													>
														<i class="mdi mdi-refresh"></i> 刷新预览
													</span>
													<span
														@click="clearMiniWhere(item)"
														class="btn btn-danger m-r-10"
													>
														<i class="mdi mdi-do-not-disturb"></i> 清空条件
													</span>
													<div>{{selectdWherePreviewString}}</div>
												</template>
											</div>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						id="btnAddOrUpdateColse"
						class="btn btn-default"
						data-dismiss="modal"
					>
						关闭
					</button>
					<button
						type="button"
						@click="addOrUpdateInterfaceList()"
						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 border3CCC"
			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="master-table-container">
						<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>
								</tr>
							</thead>
							<tbody v-if="tables">
								<tr v-for="item in tables">
									<td>
										<input
											type="checkbox"
											name="ids[]"
											v-model="selectedTables"
											:alt="item.Name"
											:value="item"
										/>
									</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>
	<!--创建接口子窗体：添加简单列-->
	<div
		class="modal fade"
		tabindex="-1"
		role="dialog"
		aria-labelledby="gridSystemModalLabel"
		id="divAddColumns"
		style="display: none"
	>
		<button
			id="btnDivAddColumns"
			type="button"
			class="btn btn-primary hidden"
			data-toggle="modal"
			data-target="#divAddColumns"
		></button>
		<div
			class="modal-dialog width800 border3CCC"
			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"
					>
						选择列
					</h4>
				</div>
				<div class="modal-body">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>
									<input
										@change="selectAllColumns"
										type="checkbox"
									/>
								</th>
								<th>列名</th>
								<th>显示名称</th>
								<th>排序号</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in columns">
								<th scope="row">
									<input
										name="columnIds[]"
										v-model="selectColumns"
										:alt="item.Id"
										:value="item.Id"
										type="checkbox"
									/>
								</th>
								<td>{{item.PropertyName}}</td>
								<td>
									<input
										v-model="item.DbColumnName"
										class="form-control"
									/>
								</td>
								<td>
									<input
										v-model="item.SortId"
										onchange="tools.ensureNumeric(this)"
										class="form-control"
									/>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						id="btnCloseAddColumns"
						class="btn btn-default"
						data-dismiss="modal"
					>
						关闭
					</button>
					<button
						type="button"
						@click="saveColumns()"
						class="btn btn-primary"
					>
						确定
					</button>
				</div>
			</div>
		</div>
	</div>
	<!--创建接口子窗体：追加复杂列-->
	<div
		class="modal fade bs-example-modal-lg"
		tabindex="-1"
		role="dialog"
		aria-labelledby="gridSystemModalLabel"
		id="divAddComplexityColumns"
		style="display: none"
	>
		<button
			id="btnAddComplexityColumns"
			type="button"
			class="btn btn-primary hidden"
			data-toggle="modal"
			data-target="#divAddComplexityColumns"
		></button>
		<div
			class="modal-dialog width800 border3CCC"
			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"
					>
						追加列
					</h4>
				</div>
				<div class="modal-body">
					<div class="card p-b-0 m-b-0">
						<ul class="nav nav-tabs page-tabs">
							<li
								id="liComplexityColumns"
								class="active"
								@click="tabClickComplexityColumns(1)"
							>
								<a href="#!">联表字段</a>
							</li>
							<li>
								<a
									href="#!"
									@click="tabClickComplexityColumns(2)"
									>函数字段</a
								>
							</li>
							<li>
								<a
									href="#!"
									@click="tabClickComplexityColumns(3)"
									>导航对象</a
								>
							</li>
							<li>
								<a
									href="#!"
									@click="tabClickComplexityColumns(4)"
									>更多开发中</a
								>
							</li>
						</ul>
					</div>
					<div class="tab-content tabbox">
						<div class="tab-pane active">
							<div class="form-group">
								<label
									>主表关联字段 （一般是外键） <span class="red">*</span></label
								>
								<select
									v-model="copcol_MasterField"
									name="MasterField"
									class="form-control"
								>
									<option
										v-if="columns&&columns.length>0"
										v-for="item in columns"
									>
										{{item.PropertyName}}
									</option>
								</select>
							</div>
							<div class="form-group">
								<label>关联的表 <span class="red">*</span></label>
								<input
									v-model="copcol_JoinTable"
									@change="changeJoinTable"
									class="form-control"
									list="browsers"
									name="joinTable"
								/>
								<datalist id="browsers">
									<option
										v-if="tables&&tables.length>0"
										v-for="item in tables"
										:value="item.Name"
									>
										{{item.Name}}
									</option>
								</datalist>
								<button
									class="btn btn-xs btn-primary removedatalist"
									@click="clearJoinTable"
								>
									<i class="mdi mdi-do-not-disturb"></i>删除选定项
								</button>
							</div>
							<div class="form-group">
								<label>关联方式<span class="red">*</span></label>
								<select
									v-model="copcol_joinType"
									name="joinType"
									class="form-control"
								>
									<option value="LeftJoin">左链接 [存在相同关联会重复]</option>
									<option value="InnerJoin">
										内链接 [存在相同关联会重复+子表不存在主表也不显示]
									</option>
									<option value="SubqueryJoin">子查询 [不会重复]</option>
								</select>
							</div>
							<div class="form-group">
								<label>关联字段（一般主键） <span class="red">*</span></label>
								<select
									v-model="copcol_joinField"
									name="joinField"
									class="form-control"
								>
									<option
										v-if="joinColumns&&joinColumns.length>0"
										v-for="item in joinColumns"
									>
										{{item.PropertyName}}
									</option>
								</select>
							</div>
							<div class="form-group">
								<label
									>关联显示字段 （一般是Name） <span class="red">*</span></label
								>
								<select
									v-model="copcol_ShowFields"
									multiple
									@change="changeShowField"
									name="joinField"
									class="form-control"
								>
									<option
										v-if="joinColumns&&joinColumns.length>0"
										v-for="item in joinColumns"
									>
										{{item.PropertyName}}
									</option>
								</select>
								<input
									class="form-control"
									readonly="readonly"
									v-model="copcol_ShowField"
								/>
							</div>
							<div class="form-group">
								<label>关联显示字段别名（AS 名称）</label>
								<input
									v-model="copcol_Name"
									name="Name"
									placeholder="默认：关联显示字段"
									class="form-control"
								/>
							</div>
							<div class="form-group">
								<label>排序号</label>
								<input
									v-model="copcol_SortId"
									onchange="tools.ensureNumeric(this)"
									name="Sort"
									class="form-control"
								/>
							</div>
						</div>
						<div class="tab-pane">
							<div class="form-group">开发中</div>
						</div>
						<div class="tab-pane">
							<div class="form-group">开发中..</div>
						</div>
						<div class="tab-pane">
							<div class="form-group">开发中..</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						id="btnCloseAddComplexityColumns"
						class="btn btn-default"
						data-dismiss="modal"
					>
						关闭
					</button>
					<button
						type="button"
						@click="saveComplexityColumns"
						class="btn btn-primary"
					>
						确定
					</button>
				</div>
			</div>
		</div>
	</div>
	<!--创建接口子窗体：添加排序-->
	<div
		class="modal fade bs-example-modal-lg"
		tabindex="-1"
		role="dialog"
		aria-labelledby="gridSystemModalLabel"
		id="divAddOrderBy"
		style="display: none"
	>
		<button
			id="btnAddOrderBy"
			type="button"
			class="btn btn-primary hidden"
			data-toggle="modal"
			data-target="#divAddOrderBy"
		></button>
		<div
			class="modal-dialog width800 border3CCC"
			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"
					>
						添加排序
					</h4>
				</div>
				<div class="modal-body">
					<div class="card-body tabbox">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>列名</th>
									<th>排序方式</th>
									<th>排序号</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="item in selectedOrderBys">
									<td>
										{{item.Name}}<input
											type="hidden"
											v-model="item.Name"
										/>
									</td>
									<td>
										<select
											v-model="item.OrderByType"
											class="form-control"
										>
											<option></option>
											<option value="ASC">正序</option>
											<option value="DESC">倒序</option>
										</select>
									</td>
									<td>
										<input
											v-model="item.SortId"
											onchange="tools.ensureNumeric(this)"
											class="form-control"
										/>
									</td>
								</tr>
							</tbody>
						</table>
						<div>
							<div>
								<p class="example-box">
									<label class="lyear-checkbox">
										<input
											v-model="selectedOrderBys_EnableSort"
											type="checkbox"
										/>
										<span class="p-l-15">允许URL覆盖上面排序</span>
									</label>
								</p>
								<p>
									<code>参数OrderByName生效：值为上面列名或者为空</code>
								</p>
								<p>
									<code>参数OrderByType生效：值为ASC或者DESC</code>
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						id="btnCloseAddOrderBy"
						class="btn btn-default"
						data-dismiss="modal"
					>
						关闭
					</button>
					<button
						type="button"
						@click="saveBtnOrderBy"
						class="btn btn-primary"
					>
						确定
					</button>
				</div>
			</div>
		</div>
	</div>
	<!--创建接口子窗体：添加条件-->
	<div
		class="modal fade bs-example-modal-lg"
		tabindex="-1"
		role="dialog"
		aria-labelledby="gridSystemModalLabel"
		id="divAddWhere"
		style="display: none"
	>
		<button
			id="btnAddWhere"
			type="button"
			class="btn btn-primary hidden"
			data-toggle="modal"
			data-target="#divAddWhere"
		></button>
		<div
			class="modal-dialog width1000 border3CCC"
			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"
					>
						添加条件
					</h4>
				</div>
				<div class="modal-body">
					<div class="card-body tabbox">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th class="w-15">条件编号</th>
									<th class="w-15">条件列</th>
									<th class="w-15">条件关系</th>
									<th>条件值</th>
									<th class="w-20">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr
									v-for="(item, index) in selectedWheres"
									:key="item.Id"
								>
									<td>{{item.Id}}</td>
									<td>
										<select
											v-model="item.PropertyName"
											class="form-control"
										>
											<option></option>
											<option v-for="item in selectedColumns">
												{{item.PropertyName}}
											</option>
											<option v-for="item in selectedComplexityColumns">
												{{item.DbColumnName}}
											</option>
										</select>
									</td>
									<td>
										<select
											v-model="item.WhereType"
											class="form-control"
										>
											<option></option>
											<option v-for="item in whereTypeList">
												{{item.Key}}
											</option>
										</select>
									</td>
									<td>
										<div class="row">
											<div class="col-md-6">
												<select
													v-model="item.ValueType"
													id="selectOption"
													class="form-control"
												>
													<option value="0">固定值</option>
													<option value="1">参数名</option>
													<option class="2">ClaimKey</option>
												</select>
											</div>
											<div class="col-md-6">
												<input
													v-model="item.Value"
													id="inputValue"
													class="form-control"
													type="text"
												/>
											</div>
										</div>
									</td>
									<td>
										<span
											class="pointer m-r-10"
											@click="addWhereItem(selectedWheres[selectedWheres.length - 1].Id)"
											><i class="mdi mdi-plus"></i> 添加</span
										>
										<span
											class="pointer"
											@click="deleteWhereItem(item.Id)"
											><i class="mdi mdi-window-close"></i> 删除</span
										>
									</td>
								</tr>
							</tbody>
						</table>
						<div class="form-group">
							<p><code>条件关系：</code></p>
							<select
								v-model="selectedWheresConditionalRelation"
								@change="showWherePreview"
								class="form-control"
							>
								<option value="And">And：并且-带OR参数NULL</option>
								<option value="AndAll">AndAll：并且</option>
								<option value="Or">Or：或者-带OR参数NULL</option>
								<option value="OrAll">OrAll： 或者</option>
								<option value="Custom">Custom ：自定义-带OR参数NULL</option>
								<option value="CustomAll">CustomAll：自定义</option>
							</select>
						</div>
						<div
							v-if="selectedWheresConditionalRelation=='Custom'||selectedWheresConditionalRelation=='CustomAll'"
							class="form-group"
						>
							<textarea
								rows="5"
								v-model="selectedWhereRelationTemplate"
								class="form-control"
							>
							</textarea>
							<p>
								<code>{1}表示编号为1的条件，{2}表示编号为2的条件 </code>
							</p>
						</div>
						<div class="form-group">
							<p><code>预览：</code></p>
							<p style="white-space: pre-line">{{selectdWherePreviewString}}</p>
							<button
								@click="showWherePreview"
								class="btn btn-info"
							>
								<i class="mdi mdi-refresh"></i> 刷新结果
							</button>
						</div>
					</div>
					<div class="modal-footer">
						<button
							type="button"
							id="btnCloseAddWhere"
							class="btn btn-default"
							data-dismiss="modal"
						>
							关闭
						</button>
						<button
							type="button"
							@click="saveBtnWhere"
							class="btn btn-primary"
						>
							确定
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--创建接口子窗体：默认值-->
	<div
		class="modal fade bs-example-modal-lg"
		tabindex="-1"
		role="dialog"
		aria-labelledby="gridSystemModalLabel"
		id="divDefaultValue"
		style="display: none"
	>
		<button
			id="btnDafeultValue"
			type="button"
			class="btn btn-primary hidden"
			data-toggle="modal"
			data-target="#divDefaultValue"
		></button>
		<div
			class="modal-dialog width800 border3CCC"
			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"
					>
						配置列默认值
					</h4>
				</div>
				<div class="modal-body">
					<div class="card-body tabbox">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>列名</th>
									<th width="300">默认值类型</th>
									<th width="200">值</th>
								</tr>
							</thead>
							<tbody>
								<tr
									v-if="selectDefaultValueColumns&&selectDefaultValueColumns.length>0"
									v-for="x in  selectDefaultValueColumns"
								>
									<td>{{x.PropertyName}}</td>
									<td>
										<select
											v-model="x.Type"
											class="form-control"
										>
											<option value="0">无</option>
											<option value="1">固定值</option>
											<option value="2">
												默认值(int等于0，空字符串等于空等)
											</option>
											<option value="3">当前时间</option>
											<option value="4">ClaimKey</option>
										</select>
									</td>
									<td>
										<input
											v-model="x.Value"
											:class="[x.Type != 1&&x.Type != 4 ? 'hidden' : '', 'form-control'].join(' ')"
										/>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button
						type="button"
						id="btnDafeultValueClose"
						class="btn btn-default"
						data-dismiss="modal"
					>
						关闭
					</button>
					<button
						type="button"
						@click="saveDefaultValue"
						class="btn btn-primary"
					>
						确定
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	var vueObj = new Vue({
		el: '#apibox',
		data: {
			data: null,
			error: null,
			addTitle: '添加接口',
			editTitle: '修改接口',
			title: '',
			tabIndex: 0,
			formData: {},
			selectedItems: [],
			groupList: [],
			whereTypeList: [],
			interfaceCategroyList: [],
			actionList: [],
			currentActionType: [],
			currentActionTypeContext: [],
			tables: [],
			selectedTables: [],
			databaseId: 0,
			database: [],
			editId: 0,
			columns: [],
			joinColumns: [],
			selectColumns: [],
			selectColumnsTabIndex: 1,
			selectedColumns: [],
			selectedOrderBys: [],
			selectedOrderByString: '-',
			selectedOrderBys_EnableSort: false,
			selectedComplexityColumns: [],
			selectedWhereString: '-',
			selectedWheres: [],
			selectedWhereRelationTemplate: '( {1} and {2} ) ',
			selectedWheresConditionalRelation: 'AND',
			selectdWherePreviewString: null,
			selectDefaultValueColumns: [],
			saveDefaultValueColumns: [],
			//ComplexityColumn
			copcol_JoinTable: null,
			copcol_MasterField: null,
			copcol_joinType: null,
			copcol_joinField: null,
			copcol_SortId: null,
			copcol_Name: null,
			copcol_ShowField: null,
			copcol_ShowFields: [],
			//update
			updateColumns: [],
		},
		mounted() {
			this.fetchData('')
			this.bindGroupListSelect()
			this.bindInterfaceCategroySelect()
			this.bindActionLists()
			this.bindDatabaseSelect()
			this.bindWhereType()
		},
		methods: {
			/*
               主列表逻辑
            */
			fetchData(append) {
				var url =
					'/PrivateReZeroRoute/100003/GetDynamicInterfacePageList' + append
				axios
					.get(url, jwHeader)
					.then(response => {
						this.data = response.data
						this.error = null
					})
					.catch(error => {
						this.error = error.message
						this.data = null
					})
			},
			onSearch: function (page) {
				var urlParameters =
					'?' +
					tools.objectToQueryString({
						__pageNumber: page,
						__pageSize: tools.getValue('selPageSize'),
						Name: txtName.value,
						GroupName: selGroupName.value,
						DataBaseId: selDatabase.value,
						InterfaceCategoryId: selInterfaceCategoryId.value,
					})
				this.fetchData(urlParameters)
			},
			changeDatabase: function () {
				this.onSearch(1)
			},
			selectAll(event) {
				if (event.target.checked) {
					// 全选
					this.selectedItems = this.data.Data.map(item => item.Id)
				} else {
					// 全不选
					this.selectedItems = []
				}
			},
			deleteAndConfirm: function (item) {
				if (item == null) {
					var url =
						'/PrivateReZeroRoute/100003/DeleteDynamicInterface?IsDeleted=true&Id=' +
						localStorage.delId
					axios
						.get(url, jwHeader)
						.then(response => {
							this.data = response.data
							this.error = null
							this.onSearch()
							btnDelClose.click()
						})
						.catch(error => {
							this.error = error.message
							this.data = null
						})
				} else {
					localStorage.delId = item.Id
				}
			},
			enable: function () {
				alert('开发中')
			},
			disable: function () {
				alert('开发中')
			},
			openGenerateCode: function () {
				tools.alert('功能开发中..')
			},

			/*
               编辑接口
            */
			openEdit: function (item) {
				var th = this
				var title = th.editTitle
				var urlById =
					'/PrivateReZeroRoute/100003/GetInternalDetail?id=' + item.Id
				if (item.Id) {
					axios
						.get(urlById, jwHeader)
						.then(response => {
							var oldData = JSON.parse(JSON.stringify(th.$data))
							var oldDatabase = th.database
							var data = JSON.parse(response.data.DataModel.CurrentDataString)
							tools.assignValuesToObject(data, th)
							th.title = title
							th.editId = response.data.Id
							th.data = oldData.data
							th.interfaceCategroyList = oldData.interfaceCategroyList
							th.actionList = oldData.actionList
							th.database = oldDatabase
							if (th.currentActionTypeContext) {
								if (th.currentActionTypeContext.FormElements) {
									if (
										th.currentActionTypeContext.FormElements[1].SelectDataSource
									) {
										th.currentActionTypeContext.FormElements[1].SelectDataSource =
											oldData.actionList[0].Items[1].FormElements[1].SelectDataSource
									}
								}
							}
							btnSave.click()
							this.showEditSql()
							setTimeout(function () {
								th.setSelectedOptions()
							}, 500)
						})
						.catch(error => {
							this.error = error.message
							this.data = null
						})
				}
			},

			/*
                添加接口
            */
			//1.打开和保存-添加接口
			openNext: function () {
				this.title = this.addTitle
				btnNext.click()
				this.currentActionTypeContext = []
				this.selectDefaultValueColumns = []
				this.saveDefaultValueColumns = []
				this.selectdWherePreviewString = null
				this.editId = 0
			},
			openAdd: function (item) {
				if (this.currentActionType.length == 0) {
					tools.alert('请选择类型')
					return
				}
				btnNextClose.click()
				btnSave.click()
				this.currentActionTypeContext = this.currentActionType.Items[0]
				this.currentActionTypeContext.FormElements[0].Value =
					this.currentActionTypeContext.Text
				this.showEditSql()
			},
			addOrUpdateInterfaceList: function () {
				var elementsWithValidateData =
					document.querySelectorAll('[validate-data]')
				var isSuccess = true
				var th = this
				elementsWithValidateData.forEach(function (element) {
					var attributeName = 'validate-data'
					var attributeValue = JSON.parse(element.getAttribute(attributeName))

					if (isSuccess) {
						isSuccess = th.validateElement(element, attributeValue)
					}
				})

				if (isSuccess) {
					this.setValueEditSql()
					var formData = tools.formToJson('frmSave')
					formData.DatabaseId = this.DatabaseId
					var vueData = this.$data
					vueData.data = []
					var oldActionList = vueData.actionList
					vueData.actionList = null
					var currentString = JSON.stringify(vueData)
					vueData.actionList = oldActionList
					formData.Json = {
						Id: this.editId,
						Columns: this.selectedColumns,
						ComplexityColumns: this.selectedComplexityColumns,
						Where: this.selectedWheres,
						WhereRelation: this.selectedWheresConditionalRelation,
						WhereRelationTemplate: this.selectedWhereRelationTemplate,
						OrderBys: this.selectedOrderBys,
						OrderBysEnableSort: this.selectedOrderBys_EnableSort,
						CurrentDataString: currentString,
						DataBaseId: this.databaseId,
						DefaultValueColumns: this.saveDefaultValueColumns,
					}
					var url = '/PrivateReZeroRoute/100003/SaveInterfaceList'
					axios
						.post(url, formData, jwHeader)
						.then(response => {
							if (response.data == true) {
								tools.alert('保存成功')
								btnAddOrUpdateColse.click()
								this.error = null
								th.onSearch()
							} else {
								tools.alert(response.data.message)
							}
						})
						.catch(error => {
							this.error = error.message
						})
				}
			},
			interfaceListTabClick: function (index, item) {
				this.tabIndex = index
				this.currentActionTypeContext = this.currentActionType.Items[index]
				if (this.currentActionTypeContext.FormElements.length > 0)
					this.currentActionTypeContext.FormElements[0].Value = item.Text
				this.showEditSql()
			},
			//2.选择表逻辑-添加接口
			openImportEntity: function () {
				btnImportEntity.click()
				this.bindImportTables()
			},
			importEntitySubmit: function () {
				var th = this
				this.currentActionType.Items.forEach(item => {
					item.FormElements.forEach(element => {
						element.Value =
							element.ElementType == '1'
								? this.selectedTables[0].Name
								: element.Value
					})
				})
				this.columns = []
				btnImportEntityClose.click()
				this.bindUpdates()
			},
			bindImportTables: function () {
				var url =
					'/PrivateReZeroRoute/100004/GetAllTables?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
					})
			},
			selectAllTables(event) {
				if (event.target.checked) {
					// 全选
					this.selectedTables = this.tables.map(item => item)
				} else {
					// 全不选
					this.selectedTables = []
				}
			},
			//3.添加简单列逻辑-添加接口
			openAddColumn: function (item) {
				var tableValue = document.querySelectorAll('[name=TableId]')[0].value
				if (!tableValue) {
					tools.alert('请先选择主表')
					return
				}
				var th = this
				btnDivAddColumns.click()
				this.setColumns()
			},
			saveColumns: function () {
				var th = this
				this.selectedColumns = this.columns.filter(it =>
					th.selectColumns.includes(it.Id)
				)
				btnCloseAddColumns.click()
				this.clearOrderBy()
			},
			selectAllColumns(event) {
				if (event.target.checked) {
					// 全选
					this.selectColumns = this.columns.map(item => item.Id)
				} else {
					// 全不选
					this.selectColumns = []
				}
			},
			//4.追加复杂列逻辑-添加接口
			openAddComplexityColumn: function (item) {
				var tableValue = document.querySelectorAll('[name=TableId]')[0].value
				if (!tableValue) {
					tools.alert('请先选择主表')
					return
				}
				var th = this
				this.setColumns()
				btnAddComplexityColumns.click()
				this.clearComplexityColumns()
			},
			changeJoinTable: function () {
				this.setJoinColumns()
			},
			clearJoinTable: function () {
				this.copcol_JoinTable = null
				this.joinColumns = []
			},
			saveComplexityColumns: function () {
				// 封装以 this.copcol_ 开头的属性到 json 对象中
				var json = {
					ShowField: this.copcol_ShowField,
					Name: this.copcol_Name,
					joinType: this.copcol_joinType,
					JoinTable: this.copcol_JoinTable,
					MasterField: this.copcol_MasterField,
					joinField: this.copcol_joinField,
					SortId: this.copcol_SortId,
				}
				if (json.ShowField) {
					if (!this.checkCommas(json.ShowField, json.Name)) {
						return
					}
				} else {
					tools.alert('带*的请填写完整')
					return
				}
				if (!json.Name) {
					json.Name = json.ShowField
				}
				var newJsons = this.splitJsonByTwoKeys(json, 'ShowField', 'Name')
				var isOk = true
				newJsons.forEach(copcolJson => {
					if (!isOk) {
						return
					}
					if (this.selectColumnsTabIndex != 1) {
						tools.alert('开发中..')
						isOk = false
						return
					}

					if (!this.validateComplexityColumns(copcolJson)) {
						tools.alert('带*的请填写完整')
						isOk = false
						return
					}

					var asName = copcolJson.Name || copcolJson.ShowField

					var addItem = {
						PropertyName:
							document.querySelectorAll('[name=TableId]')[0].value +
							' ' +
							copcolJson.joinType +
							' ' +
							copcolJson.JoinTable +
							' ON ' +
							document.querySelectorAll('[name=TableId]')[0].value +
							'.' +
							copcolJson.MasterField +
							'=' +
							copcolJson.JoinTable +
							'.' +
							copcolJson.joinField,
						DbColumnName:
							copcolJson.JoinTable +
							'.' +
							copcolJson.ShowField +
							' AS ' +
							asName,
						SortId: 1,
						Json: {
							JoinInfo: {
								MasterField: copcolJson.MasterField,
								JoinTable: copcolJson.JoinTable,
								JoinType: copcolJson.joinType,
								JoinField: copcolJson.joinField,
								ShowField: copcolJson.ShowField,
								Name: copcolJson.Name,
								SortId: copcolJson.SortId,
							},
						},
					}

					if (
						this.selectedColumns.some(column => column.DbColumnName == asName)
					) {
						tools.alert(
							'【关联显示字段】与主表重复，可以设置【关联显示字段别名】来定义显示名'
						)
						isOk = false
						return
					}

					this.selectedComplexityColumns.push(addItem)
					btnCloseAddComplexityColumns.click()
					this.clearOrderBy()
				})
			},
			deleteSelectedColumn: function (item) {
				this.selectedColumns.removeArrayItem(item)
			},
			deleteComplexitySelectedColumn: function (item) {
				this.selectedComplexityColumns.removeArrayItem(item)
			},
			tabClickComplexityColumns: function (index) {
				if (index != 1) liComplexityColumns.className = ''
				var $tabs = $('#divAddComplexityColumns  .tab-pane')
				$tabs.hide()
				$tabs.eq(index - 1).show()
				this.selectColumnsTabIndex = index
			},
			//5.添加排序逻辑-添加接口
			openOrderByColumn: function () {
				if (!this.validateColumsAny()) {
					tools.alert('请选择列后在选择排序')
					return
				}
				if (this.selectedOrderBys.length == 0) {
					this.selectedOrderBys = this.selectedColumns.map(it => ({
						Name: it.DbColumnName,
					}))
					var selectComplexityColumnOrderBys =
						this.selectedComplexityColumns.map(it => ({
							Name: it.DbColumnName,
						}))
					this.selectedOrderBys = this.selectedOrderBys.concat(
						selectComplexityColumnOrderBys
					)
				}
				btnAddOrderBy.click()
			},
			saveBtnOrderBy: function () {
				btnCloseAddOrderBy.click()
				this.selectedOrderByString = this.selectedOrderBys
					.filter(it => it.OrderByType == 'ASC' || it.OrderByType == 'DESC')
					.sort(function (a, b) {
						return a.SortId - b.SortId
					})
					.map(it => it.Name + ' ' + it.OrderByType)
					.join(',')
			},
			//6.添加条件逻辑-添加接口
			openWhere: function () {
				if (!this.validateColumsAny()) {
					tools.alert('请选择列后在选择条件')
					return
				}
				if (this.selectedWheres.length == 0) {
					this.selectedWheres.push(this.getWhereModel())
				}
				btnAddWhere.click()
			},
			openMiniWhere: function () {
				var tableValue = document.querySelectorAll('[name=TableId]')[0].value
				if (!tableValue) {
					tools.alert('请先选择主表')
					return
				}
				if (this.selectedWheres.length == 0) {
					this.selectedWheres.push(this.getWhereModel())
				}
				var th = this
				var url =
					'/PrivateReZeroRoute/100003/GetEntityColuminsByEntityId?TableId=' +
					this.selectedTables[0].Id
				axios
					.get(url, jwHeader)
					.then(response => {
						th.columns = response.data
						th.selectedColumns = th.columns
					})
					.catch(error => {
						this.error = error.message
					})
				btnAddWhere.click()
			},
			clearMiniWhere: function () {
				this.selectedColumns = []
				this.selectedWheres = []
				this.selectdWherePreviewString = null
			},
			saveBtnWhere: function () {
				btnCloseAddWhere.click()
			},
			addWhereItem: function (id) {
				var model = this.getWhereModel()
				model.Id = id + 1
				this.selectedWheres.push(model)
			},
			deleteWhereItem: function (id) {
				if (this.selectedWheres.length == 1) {
					this.selectedWheres = []
					btnCloseAddWhere.click()
				} else {
					this.selectedWheres.removeArrayItem(
						this.selectedWheres.find(it => it.Id == id)
					)
				}
			},
			showWherePreview: function () {
				var cr = this.selectedWheresConditionalRelation
				var isAndAll = cr == 'AndAll'
				var isOrAll = cr == 'OrAll'
				var isAnd = cr == 'And'
				var isOr = cr == 'Or'
				var isCustom = cr == 'Custom'
				var isCustomAll = cr == 'CustomAll'
				var andStr = 'AND'
				var orStr = 'Or'
				var empStr = ''
				if (isCustom || isCustomAll) {
					var template = this.selectedWhereRelationTemplate + ''
					this.selectedWheres.forEach(function (it) {
						var value = ` (${it.PropertyName} ${it.WhereType} ${
							it.ValueType == 0
								? it.Value
								: `@${it.Value} OR (@${it.Value} IS NULL)`
						}) `
						if (isCustomAll) {
							value = `(${it.PropertyName} ${it.WhereType} ${
								it.ValueType == 0 ? it.Value : `@${it.Value}`
							}) `
						}
						var regex = new RegExp('\\{' + it.Id + '\\}', 'g')
						template = template.replace(regex, value)
					})
					this.selectdWherePreviewString = template
				}
				if (isAnd || isOr) {
					var type = isAnd ? andStr : orStr
					var wheres = this.selectedWheres
						.map(
							it =>
								`${type} (${it.PropertyName} ${it.WhereType} ${
									it.ValueType == 0
										? it.Value
										: `@${it.Value} OR (@${it.Value} IS NULL)`
								})\r\n`
						)
						.join(empStr)
					this.selectdWherePreviewString = wheres
				} else if (isAndAll || isOrAll) {
					var type = isAndAll ? andStr : orStr
					var wheres = this.selectedWheres
						.map(
							it =>
								`${type} (${it.PropertyName} ${it.WhereType} ${
									it.ValueType == 0 ? it.Value : `@${it.Value}`
								})\r\n `
						)
						.join(empStr)
					this.selectdWherePreviewString = wheres
				}
			},
			//7.配置插入或者更新默认值
			saveDefaultValue: function () {
				var th = this
				th.saveDefaultValueColumns = []
				th.selectDefaultValueColumns.forEach(function (item) {
					th.saveDefaultValueColumns.push({
						PropertyName: item.PropertyName,
						Type: item.Type,
						Value: item.Value,
					})
				})
				btnDafeultValueClose.click()
			},
			openDefaultValue: function () {
				var tableValue = document.querySelectorAll('[name=TableId]')[0].value
				if (!tableValue) {
					tools.alert('请先选择主表')
					return
				}
				var th = this
				var url =
					'/PrivateReZeroRoute/100003/GetEntityColuminsByEntityId?TableId=' +
					this.selectedTables[0].Id
				axios
					.get(url, jwHeader)
					.then(response => {
						th.selectDefaultValueColumns = []
						response.data
							.filter(it => !it.IsPrimarykey)
							.forEach(function (item) {
								if (
									th.saveDefaultValueColumns.some(
										it => it.PropertyName == item.PropertyName
									)
								) {
									var match = th.saveDefaultValueColumns.find(
										it => it.PropertyName == item.PropertyName
									)
									th.selectDefaultValueColumns.push({
										PropertyName: match.PropertyName,
										Value: match.Value,
										Type: match.Type,
									})
								} else {
									th.selectDefaultValueColumns.push({
										PropertyName: item.PropertyName,
										Type: 0,
										Value: null,
									})
								}
							})
						btnDafeultValue.click()
					})
					.catch(error => {
						this.error = error.message
					})
			},

			/*
                  次要方法
            */
			bindGroupListSelect: function () {
				axios
					.get('/PrivateReZeroRoute/100004/GetDynamicGroupNameList', jwHeader)
					.then(response => {
						this.groupList = response.data
					})
					.catch(error => {
						this.error = error.message
						this.data = null
					})
			},
			bindInterfaceCategroySelect: function () {
				axios
					.get(
						'/PrivateReZeroRoute/100004/GetDynamicInterfaceCategoryList',
						jwHeader
					)
					.then(response => {
						this.interfaceCategroyList = response.data
					})
					.catch(error => {
						this.error = error.message
						this.data = null
					})
			},
			bindActionLists: function () {
				axios
					.get('/PrivateReZeroRoute/100004/GetActionType', jwHeader)
					.then(response => {
						this.actionList = response.data
					})
					.catch(error => {
						this.error = error.message
					})
			},
			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
					})
			},
			bindWhereType: function () {
				axios
					.get('/PrivateReZeroRoute/100004/GetWhereTypeList', jwHeader)
					.then(response => {
						this.whereTypeList = response.data
					})
					.catch(error => {
						this.error = error.message
					})
			},
			setColumns: function () {
				var th = this
				if (this.selectedTables.length > 0) {
					var url =
						'/PrivateReZeroRoute/100003/GetEntityColuminsByEntityId?TableId=' +
						this.selectedTables[0].Id
					axios
						.get(url, jwHeader)
						.then(response => {
							th.columns = response.data
						})
						.catch(error => {
							this.error = error.message
						})
				}
			},
			setJoinColumns: function () {
				var th = this
				var tableId = this.copcol_JoinTable
				tableId = this.tables.find(function (item) {
					return item.Name === tableId
				}).Id
				if (this.selectedTables.length > 0) {
					var url =
						'/PrivateReZeroRoute/100003/GetEntityColuminsByEntityId?TableId=' +
						tableId
					axios
						.get(url, jwHeader)
						.then(response => {
							th.joinColumns = response.data
						})
						.catch(error => {
							this.error = error.message
						})
				}
			},
			validateElement: function (element, attributeValue) {
				if (attributeValue.IsRequired && !element.value) {
					tools.alert(attributeValue.Text + '不能为空')
					return false
				}
				if (
					attributeValue.Name === 'Url' &&
					element.value &&
					!tools.isValidURLPattern(element.value)
				) {
					tools.alert('Url格式不正确，应该是/xxx/yyy 或者 /xx.xx')
					return false
				}
				return true
			},
			validateColumsAny: function () {
				return (
					this.selectedColumns.length + this.selectedComplexityColumns.length >
					0
				)
			},
			clearOrderBy: function () {
				this.selectedOrderBys = []
				this.selectedOrderBys_EnableSort = false
			},
			clearComplexityColumns: function () {
				this.copcol_joinField = null
				this.copcol_Name = null
				this.copcol_SortId = null
				this.copcol_ShowField = null
				this.copcol_MasterField = null
				this.copcol_JoinTable = null
				this.copcol_joinType = null
				this.copcol_ShowFields = []
			},
			validateComplexityColumns: function () {
				if (
					this.copcol_joinField == null ||
					this.copcol_ShowField == null ||
					this.copcol_joinType == null ||
					this.copcol_MasterField == null ||
					this.copcol_JoinTable == null
				) {
					return false
				}
				return true
			},
			getWhereModel: function () {
				return {
					Id: 1,
					PropertyName: null,
					WhereType: 'Equal',
					ValueType: 0,
					Value: null,
				}
			},
			checkCommas: function (str1, str2) {
				if (!str2) {
					return true
				}

				// 计算两个字符串中的逗号数量
				var commasInStr1 = (str1.match(/,/g) || []).length
				if (commasInStr1 == 0) {
					return true
				}
				var commasInStr2 = (str2.match(/,/g) || []).length

				// 比较两个字符串中的逗号数量是否相等
				if (commasInStr1 === commasInStr2) {
					return true
				} else {
					tools.alert(
						'【关联显示字段别名】存在多个要用 “,” 分割开，数量要一样。'
					)
					return false
				}
			},
			changeShowField: function () {
				this.copcol_ShowField = this.copcol_ShowFields.join(',')
			},
			splitJsonByTwoKeys: function (jsonObj, key1, key2) {
				// 验证输入对象是否有效
				if (typeof jsonObj !== 'object' || jsonObj === null) {
					throw new Error('Invalid input: jsonObj must be an object.')
				}

				// 验证key1和key2是否存在于jsonObj中且为字符串类型
				if (!(key1 in jsonObj) || typeof jsonObj[key1] !== 'string') {
					throw new Error(
						`Invalid input: ${key1} must be a string property of jsonObj.`
					)
				}
				if (!(key2 in jsonObj) || typeof jsonObj[key2] !== 'string') {
					throw new Error(
						`Invalid input: ${key2} must be a string property of jsonObj.`
					)
				}

				// 分割key1和key2对应的值
				const values1 = jsonObj[key1].split(',')
				const values2 = jsonObj[key2].split(',')

				// 验证两个键的值分割后长度是否一致
				if (values1.length !== values2.length) {
					throw new Error(
						`The number of elements in ${key1} and ${key2} must be the same.`
					)
				}

				// 创建结果数组
				const result = []

				// 遍历分割后的值，构建新的对象并添加到结果数组中
				for (let i = 0; i < values1.length; i++) {
					const newObj = Object.assign({}, jsonObj) // 复制原始对象
					newObj[key1] = values1[i].trim() // 替换key1的值
					newObj[key2] = values2[i].trim() // 替换key2的值
					result.push(newObj)
				}

				return result
			},
			showEditSql: function () {
				setTimeout(function () {
					var $sql = $("[name='Sql']")
					if ($sql.size() > 0) {
						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($sql.val())
						editor.selection.clearSelection()
					}
				}, 100)
			},
			setValueEditSql: function () {
				var $sql = $("[name='Sql']")
				if ($sql.size() > 0) {
					var editor = ace.edit('divAceEditor')
					this.currentActionTypeContext.FormElements[3].Value =
						editor.getValue()
					$sql.val(editor.getValue())
				}
			},
			closeEditSql: function () {
				var editor = ace.edit('divAceEditor')
				editor.destroy()
			},
			bindUpdates: function () {
				var th = this
				var url =
					'/PrivateReZeroRoute/100003/GetEntityColuminsByEntityId?TableId=' +
					this.selectedTables[0].Id
				axios
					.get(url, jwHeader)
					.then(response => {
						th.updateColumns = response.data
					})
					.catch(error => {
						this.error = error.message
					})
			},
			setUpdateColums: function (item) {
				// 初始化一个空数组来存储选中的值
				var selectedValues = []

				// 遍历 <select> 元素的所有 <option> 子元素
				for (var i = 0; i < selUpdateColumns.options.length; i++) {
					// 检查 <option> 是否被选中
					if (selUpdateColumns.options[i].selected) {
						// 如果被选中，则将其值添加到 selectedValues 数组中
						selectedValues.push(selUpdateColumns.options[i].value)
					}
				}
				// 将选中的值转换为逗号分隔的字符串
				var valueStr = selectedValues.join(',')
				item.Value = valueStr
			},
			setSelectedOptions: function () {
				var id = 'selUpdateColumns'
				var selectElement = document.getElementById(id)
				if (selectElement == null) return
				var valueStr = $(selectElement).prev().val()
				// 清空当前select的所有选中项
				for (var i = 0; i < selectElement.options.length; i++) {
					selectElement.options[i].selected = false
				}

				// 将传入的逗号分隔字符串分割成数组
				var values = valueStr.split(',')

				// 遍历数组中的每一个值
				for (var j = 0; j < values.length; j++) {
					// 去除值两边的空格
					var value = values[j].trim()

					// 遍历<select>的所有<option>，查找匹配的项并选中
					for (var k = 0; k < selectElement.options.length; k++) {
						if (selectElement.options[k].value === value) {
							selectElement.options[k].selected = true
							break // 找到匹配项后跳出内层循环
						}
					}
				}
			},
		},
	})
</script>