@@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>