@@master_page.html
<div id="app">
	<section class="app-container">
		<form
			id="frmSubmit"
			class="form"
		>
			<section
				class="row"
				style="grid-area: a"
			>
				<label for="">本地</label>
				<input
					type="text"
					placeholder="表名"
					v-model="formData.SYSTEM_TABLE_NAME"
				/>
				<input
					type="text"
					placeholder="表注释"
					v-model="formData.SYSTEM_TABLE_CNNAME"
				/>
				<input
					type="text"
					placeholder="字段名"
					v-model="formData.SYSTEM_FIELD"
				/>
				<input
					type="text"
					placeholder="字段注释"
					required
					v-model="formData.SYSTEM_NAME"
				/>
				<select
					style="width: 100px"
					v-model="formData.SYSTEM_FIELD_TYPE"
				>
					<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"
				/>
			</section>
			<section
				class="row"
				style="grid-area: b"
			>
				<label for="">三方</label>
				<input
					type="text"
					placeholder="表名"
					v-model="formData.OBJECT_TABLE_NAME"
				/>
				<input
					type="text"
					placeholder="表注释"
					v-model="formData.OBJECT_TABLE_CNNAME"
				/>
				<input
					type="text"
					placeholder="字段名"
					v-model="formData.INTERFACE_FIELD"
				/>
				<input
					type="text"
					placeholder="字段注释"
					required
					v-model="formData.INTERFACE_NAME"
				/>
				<select
					style="width: 100px"
					title="字段类型"
					v-model="formData.OBJECT_FIELD_TYPE"
				>
					<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"
				/>
			</section>
			<section
				class="domain"
				style="grid-area: c"
			>
				<button
					type="button"
					@click="save"
				>
					保存
				</button>
				<button>清空</button>
			</section>
		</form>

		<section class="list">
			<section
				v-for="item in data.Data"
				:key="item.id"
			>
				{{item.ID}}
			</section>
		</section>

		@@page_control.html
	</section>
</div>

<script>
	new Vue({
		el: '#app',
		data() {
			return {
				count: 1,
				data: null,
				error: null,
				dict: {
					filedType: [],
				},
				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: '',
				},
			}
		},
		created() {
			this.getDictOption()
			this.fetchData('')
		},
		mounted() {},
		methods: {
			getDictOption() {
				axios
					.get('/dict_data/simpleList?type=std_filed_type', jwHeader)
					.then(res => {
						this.dict.filedType = res.data
					})
			},
			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
					})
			},
			save() {
				const data = this.formData
				const url = data.ID ? '/std_filed/update' : '/std_filed/create'
				axios
					.post(url, data, jwHeader)
					.then(response => {
						console.log(response.data)
						this.fetchData('')
					})
					.catch(error => {})
			},
		},
	})
</script>

<style>
	.app-container {
		box-sizing: border-box;
		padding: 10px;
		background-color: #fff;
	}
	.form {
		padding: 10px;
		display: grid;
		grid-template-rows: repeat(2, 1fr);
		grid-template-columns: auto auto;
		grid-template-areas: 'a c' 'b c';
		gap: 5px;
	}

	.form .row {
		display: flex;
		flex-flow: row nowrap;
		gap: 5px;
		align-items: center;
	}

	.form .domain {
		display: flex;
		flex-flow: row nowrap;
		align-items: end;
		gap: 10px;
	}
	.domain button {
		border: 0;
		padding: 5px 10px;
		background-color: #0029be;
		border-radius: 4px;
		color: #fff;
	}
	.row label {
		margin-bottom: 0;
		font-weight: normal;
	}
	.row input,
	.row select {
		outline: none;
		border: 0;
		padding: 5px 10px;
		background-color: #cccccc88;
		border-radius: 4px;
		color: #000;
	}
</style>