@@master_page.html
<link
	href="css/page_table_list.css"
	rel="stylesheet"
/>
<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-2">
						<input
							class="form-control"
							type="text"
							id="systemTable"
							name="example-text-input"
							placeholder="本地表名"
						/>
					</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 class="col-md-4"></div>
				</div>
			</div>
		</form>
		<div class="toolbar-btn-action">
			<button
				@click="openAddDiv()"
				class="btn btn-primary m-l-15"
				data-toggle="modal"
				data-target="#gridSystemModal"
			>
				<i class="mdi mdi-plus"></i> 新增
			</button>
		</div>
	</div>
	<div class="card-body">
		<h5></h5>
		<div class="table-responsive">
			<table class="table table-bordered">
				<thead>
					<tr
						v-if="data && data.Columns && data.Columns.length > 0"
					>
						<th
							class="mi-w-100"
							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 v-for="column in data.Columns">
							{{ item[column.PropertyName] }}
						</td>

						<td class="table_opt">
							<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
								@click="deleteAndConfirm(item)"
								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
		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"
							style="
								display: flex;
								flex-flow: column nowrap;
								gap: 5px;
							"
						>
							<label
								for=""
								style="text-align: left"
							>
								本地</label
							>
							<input
								type="text"
								placeholder="表名"
								name="SYSTEM_TABLE_NAME"
								class="form-control"
								v-model="formData.SYSTEM_TABLE_NAME"
							/>
							<input
								type="text"
								placeholder="表注释"
								v-model="formData.SYSTEM_TABLE_CNNAME"
								name="SYSTEM_TABLE_CNNAME"
								class="form-control"
							/>
							<input
								type="text"
								placeholder="字段名"
								v-model="formData.SYSTEM_FIELD"
								name="SYSTEM_FIELD"
								class="form-control"
							/>
							<input
								type="text"
								placeholder="字段注释"
								required
								v-model="formData.SYSTEM_NAME"
								name="SYSTEM_TABLE_NAME"
								class="form-control"
							/>
							<select
								style="width: 100%"
								v-model="formData.SYSTEM_FIELD_TYPE"
								name="SYSTEM_FIELD_TYPE"
								class="form-control"
							>
								<option
									v-for="(item,index) in dict.filedType"
									:key="index"
									:value="item.VALUE"
								>
									{{item.LABEL}}
								</option>
							</select>
							<input
								v-if="formData.SYSTEM_FIELD_TYPE == 'dict'"
								type="text"
								placeholder="字典名称"
								v-model="formData.SYSTEM_DICT_NAME"
								name="SYSTEM_DICT_NAME"
								class="form-control"
							/>
						</div>
						<div
							class="form-group"
							style="
								display: flex;
								flex-flow: column nowrap;
								gap: 5px;
							"
						>
							<label
								for=""
								style="text-align: left"
							>
								三方
							</label>
							<input
								type="text"
								placeholder="表名"
								v-model="formData.OBJECT_TABLE_NAME"
								name="OBJECT_TABLE_NAME"
								class="form-control"
							/>
							<input
								type="text"
								placeholder="表注释"
								v-model="formData.OBJECT_TABLE_CNNAME"
								name="OBJECT_TABLE_CNNAME"
								class="form-control"
							/>
							<input
								type="text"
								placeholder="字段名"
								v-model="formData.INTERFACE_FIELD"
								name="INTERFACE_FIELD"
								class="form-control"
							/>
							<input
								type="text"
								placeholder="字段注释"
								required
								v-model="formData.INTERFACE_NAME"
								name="INTERFACE_NAME"
								class="form-control"
							/>
							<select
								style="width: 100%"
								title="字段类型"
								v-model="formData.OBJECT_FIELD_TYPE"
								name="OBJECT_FIELD_TYPE"
								class="form-control"
							>
								<option
									v-for="(item,index) in dict.filedType"
									:key="index"
									:value="item.VALUE"
								>
									{{item.LABEL}}
								</option>
							</select>
							<input
								v-if="formData.OBJECT_FIELD_TYPE == 'dict'"
								type="text"
								placeholder="字典名称"
								v-model="formData.OBJECT_DICT_NAME"
								name="OBJECT_DICT_NAME"
								class="form-control"
							/>
						</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>
<script>
	var vueObj = new Vue({
		el: '#apibox',
		data: {
			data: null,
			error: null,
			addTitle: '添加动态接口分类',
			editTitle: '修改态接口分类',
			title: '',
			formData: {
				ID: '',
				SYSTEM_NAME: '',
				SYSTEM_FIELD: '',
				INTERFACE_NAME: '',
				INTERFACE_FIELD: '',
				OBJECT_TABLE_NAME: '',
				OBJECT_TABLE_CNNAME: '',
				SYSTEM_TABLE_CNNAME: '',
				SYSTEM_TABLE_NAME: '',
				SYSTEM_FIELD_TYPE: 'value',
				SYSTEM_DICT_NAME: '',
				OBJECT_FIELD_TYPE: 'value',
				OBJECT_DICT_NAME: '',
			},
			databaseId: 1,
			database: [],
			tables: [],
			isSelectTable: {},
			dict: {
				filedType: [],
			},
		},
		created() {
			this.getDictOption()
		},
		mounted() {
			this.fetchData('')
		},
		methods: {
			fetchData(append) {
				var url = `/std_filed/list?` + append
				axios
					.get(url, jwHeader)
					.then(response => {
						this.data = response.data
						this.error = null
					})
					.catch(error => {
						this.error = error.message
						this.data = null
					})
			},
			getDictOption() {
				axios
					.get(
						'/dict_data/simpleList?type=std_filed_type',
						jwHeader
					)
					.then(res => {
						this.dict.filedType = res.data
					})
			},
			onSearch: function (page) {
				var urlParameters =
					'&' +
					tools.objectToQueryString({
						__pageNumber: page,
						__pageSize: tools.getValue('selPageSize'),
					})
				this.fetchData(urlParameters)
			},
			deleteAndConfirm: function (item) {
				var url = `/std_filed/delete?Id=${item.ID}`
				axios
					.get(url, jwHeader)
					.then(response => {
						this.data = response.data
						this.error = null
						this.onSearch()
					})
					.catch(error => {
						this.error = error.message
						this.data = null
					})
			},
			openEditDiv: function (item) {
				var urlById = '/std_filed/get?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) {
				window.location.href = './add_filed.html'
			},
			addOrUpdate: function () {
				var th = this
				var frmId = 'frmEdit'
				var json = this.formData
				var url = json.ID
					? '/std_filed/update'
					: '/std_filed/create'
				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
					})
			},
		},
	})
</script>