8 changed files with 904 additions and 220 deletions
@ -0,0 +1,243 @@
|
||||
@@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> |
||||
Loading…
Reference in new issue