5 changed files with 1166 additions and 311 deletions
@ -0,0 +1,796 @@
|
||||
@@master_page.html |
||||
<style> |
||||
.filed-container { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
padding: 20px; |
||||
position: relative; |
||||
display: flex; |
||||
flex-flow: column nowrap; |
||||
gap: 20px; |
||||
} |
||||
.filed-container::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 50%; |
||||
width: 2px; |
||||
height: 100%; |
||||
background-image: linear-gradient( |
||||
to bottom, |
||||
#e6f3ff, |
||||
#fff7e6 |
||||
); |
||||
border-radius: 50%; |
||||
} |
||||
.info-container { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.info-item { |
||||
flex: 1; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-flow: column; |
||||
gap: 20px; |
||||
} |
||||
.footer { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
.footer-item { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 10px; |
||||
} |
||||
.info-item-title { |
||||
display: flex; |
||||
align-items: center; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
display: flex; |
||||
gap: 10px; |
||||
} |
||||
.info-item-upload { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 5px; |
||||
cursor: pointer; |
||||
font-weight: initial; |
||||
font-size: 14px; |
||||
color: #419ff8; |
||||
border-bottom: 1px solid #419ff8; |
||||
} |
||||
.info-item-input-container { |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 5px; |
||||
} |
||||
.info-item-input { |
||||
width: 200px; |
||||
height: 32px; |
||||
padding: 4px 11px; |
||||
border: 1px solid #d9d9d9; |
||||
border-radius: 4px; |
||||
transition: all 0.3s; |
||||
font-size: 14px; |
||||
color: #333; |
||||
outline: none; |
||||
box-sizing: border-box; |
||||
} |
||||
.info-form-container { |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
align-items: center; |
||||
gap: 10px; |
||||
} |
||||
.table { |
||||
width: 100%; |
||||
table-layout: fixed; |
||||
border-collapse: collapse; |
||||
} |
||||
.table th, |
||||
.table td { |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
white-space: nowrap; |
||||
} |
||||
.table th:nth-child(1), |
||||
.table td:nth-child(1) { |
||||
width: 70px; |
||||
} |
||||
.table th:nth-child(2), |
||||
.table td:nth-child(2), |
||||
.table th:nth-child(6), |
||||
.table td:nth-child(6) { |
||||
width: 125px; |
||||
} |
||||
.table th:nth-child(3), |
||||
.table td:nth-child(3), |
||||
.table th:nth-child(7), |
||||
.table td:nth-child(7) { |
||||
width: 120px; |
||||
} |
||||
.table th:nth-child(4), |
||||
.table td:nth-child(4), |
||||
.table th:nth-child(8), |
||||
.table td:nth-child(8) { |
||||
width: 100px; |
||||
} |
||||
.table th:nth-child(5), |
||||
.table td:nth-child(5), |
||||
.table th:nth-child(9), |
||||
.table td:nth-child(9) { |
||||
width: 100px; |
||||
} |
||||
.table th:nth-child(10), |
||||
.table td:nth-child(10) { |
||||
width: 70px; |
||||
text-align: center; |
||||
} |
||||
.footer-item-button { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 8px 16px; |
||||
border-radius: 999px; |
||||
font-size: 14px; |
||||
cursor: pointer; |
||||
transition: all 0.3s; |
||||
border: none; |
||||
color: #333; |
||||
gap: 5px; |
||||
} |
||||
.table-row { |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.local-park, |
||||
.third-park { |
||||
width: 100%; |
||||
flex: 1; |
||||
display: flex; |
||||
flex-flow: row nowrap; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.local-park th, |
||||
.third-park th { |
||||
flex: 1; |
||||
} |
||||
.table-item-input { |
||||
width: 100%; |
||||
padding: 8px 12px; |
||||
border-radius: 4px; |
||||
border: none; |
||||
font-size: 14px; |
||||
color: #606266; |
||||
background-color: #fff; |
||||
transition: border-color 0.2s ease; |
||||
outline: none; |
||||
box-sizing: border-box; |
||||
|
||||
&:disabled { |
||||
background-color: #f5f7fa; |
||||
border-color: #e4e7ed; |
||||
color: #c0c4cc; |
||||
cursor: not-allowed; |
||||
} |
||||
|
||||
&::placeholder { |
||||
color: #c0c4cc; |
||||
} |
||||
} |
||||
.table-item-select { |
||||
width: 100%; |
||||
padding: 8px 12px; |
||||
border: 1px solid #dcdfe6; |
||||
border-radius: 4px; |
||||
font-size: 14px; |
||||
color: #606266; |
||||
outline: none; |
||||
box-sizing: border-box; |
||||
border: none; |
||||
&:disabled { |
||||
background-color: #f5f7fa; |
||||
border-color: #e4e7ed; |
||||
color: #c0c4cc; |
||||
cursor: not-allowed; |
||||
} |
||||
|
||||
&::placeholder { |
||||
color: #c0c4cc; |
||||
} |
||||
} |
||||
.table-item-button { |
||||
display: inline-flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 50%; |
||||
border: none; |
||||
padding: 8px; |
||||
background-color: transparent; |
||||
color: #606266; |
||||
cursor: pointer; |
||||
transition: all 0.2s ease; |
||||
height: 32px; |
||||
width: 32px; |
||||
&:hover { |
||||
background-color: #f2f6fc; |
||||
color: #409eff; |
||||
} |
||||
|
||||
&:active { |
||||
background-color: #ecf5ff; |
||||
} |
||||
|
||||
.mdi { |
||||
font-size: 20px; |
||||
} |
||||
|
||||
&[title='保存'] { |
||||
color: #67c23a; |
||||
|
||||
&:hover { |
||||
background-color: #f0f9eb; |
||||
} |
||||
} |
||||
|
||||
&[title='取消'] { |
||||
color: #909399; |
||||
|
||||
&:hover { |
||||
background-color: #f4f4f5; |
||||
} |
||||
} |
||||
|
||||
&[title='删除'] { |
||||
color: #f56c6c; |
||||
|
||||
&:hover { |
||||
background-color: #fef0f0; |
||||
} |
||||
} |
||||
} |
||||
.info-item-upload-name { |
||||
color: #01c853; |
||||
} |
||||
</style> |
||||
<div |
||||
id="apibox" |
||||
class="card" |
||||
> |
||||
<section class="filed-container"> |
||||
<section class="info-container"> |
||||
<section class="info-item"> |
||||
<section class="info-item-title"> |
||||
本地表 |
||||
<section |
||||
class="info-item-upload-name" |
||||
v-show="localJosnName" |
||||
> |
||||
{{`(${localJosnName})`}} |
||||
</section> |
||||
<section |
||||
class="info-item-upload" |
||||
@click="uploadLocalFile" |
||||
> |
||||
<input |
||||
type="file" |
||||
style="opacity: 0; display: none" |
||||
id="localFile" |
||||
accept=".json" |
||||
/> |
||||
<i class="mdi mdi-cloud-upload"></i> |
||||
导入本地表 |
||||
</section> |
||||
</section> |
||||
<section class="info-form-container"> |
||||
<section class="info-item-input-container"> |
||||
表名<input |
||||
type="text" |
||||
class="info-item-input" |
||||
v-model="cachesData.SYSTEM_TABLE_NAME" |
||||
placeholder="请输入表名" |
||||
/> |
||||
</section> |
||||
<section class="info-item-input-container"> |
||||
表注释<input |
||||
type="text" |
||||
class="info-item-input" |
||||
v-model="cachesData.SYSTEM_TABLE_CNNAME" |
||||
placeholder="请输入表注释" |
||||
/> |
||||
</section> |
||||
</section> |
||||
</section> |
||||
<section class="info-item"> |
||||
<section class="info-item-title"> |
||||
三方表 |
||||
<section |
||||
class="info-item-upload-name" |
||||
v-show="thirdJsonName" |
||||
> |
||||
({{thirdJsonName}}) |
||||
</section> |
||||
<section |
||||
class="info-item-upload" |
||||
@click="uploadThirdFile" |
||||
> |
||||
<input |
||||
type="file" |
||||
style="opacity: 0; display: none" |
||||
id="thirdFile" |
||||
accept=".json" |
||||
/> |
||||
<i class="mdi mdi-cloud-upload"></i> |
||||
导入三方表 |
||||
</section> |
||||
</section> |
||||
<section class="info-form-container"> |
||||
<section class="info-item-input-container"> |
||||
表名<input |
||||
type="text" |
||||
class="info-item-input" |
||||
v-model="cachesData.OBJECT_TABLE_NAME" |
||||
placeholder="请输入表名" |
||||
/> |
||||
</section> |
||||
<section class="info-item-input-container"> |
||||
表注释<input |
||||
type="text" |
||||
class="info-item-input" |
||||
v-model="cachesData.OBJECT_TABLE_CNNAME" |
||||
placeholder="请输入表注释" |
||||
/> |
||||
</section> |
||||
</section> |
||||
</section> |
||||
</section> |
||||
<table class="table"> |
||||
<thead> |
||||
<tr> |
||||
<th>序号</th> |
||||
<th style="background-color: #e6f3ff">字段名</th> |
||||
<th style="background-color: #e6f3ff"> |
||||
字段注释 |
||||
</th> |
||||
<th style="background-color: #e6f3ff"> |
||||
字段类型 |
||||
</th> |
||||
<th style="background-color: #e6f3ff"> |
||||
字典名称 |
||||
</th> |
||||
<th style="background-color: #fff7e6">字段名</th> |
||||
<th style="background-color: #fff7e6"> |
||||
字段注释 |
||||
</th> |
||||
<th style="background-color: #fff7e6"> |
||||
字段类型 |
||||
</th> |
||||
<th style="background-color: #fff7e6"> |
||||
字典名称 |
||||
</th> |
||||
<th>操作</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr |
||||
v-for="(item, index) in data" |
||||
:key="index" |
||||
> |
||||
<td style="width: 150px">{{index + 1}}</td> |
||||
<td |
||||
style=" |
||||
background-color: #f5f9ff; |
||||
position: relative; |
||||
" |
||||
> |
||||
{{item.SYSTEM_FIELD}} |
||||
</td> |
||||
<td style="background-color: #f5f9ff"> |
||||
{{item.SYSTEM_NAME}} |
||||
</td> |
||||
<td style="background-color: #f5f9ff"> |
||||
{{item.SYSTEM_FIELD_TYPE}} |
||||
</td> |
||||
<td style="background-color: #f5f9ff"> |
||||
{{item.SYSTEM_DICT_NAME}} |
||||
</td> |
||||
<td style="background-color: #fffbf2"> |
||||
{{item.INTERFACE_FIELD}} |
||||
</td> |
||||
<td style="background-color: #fffbf2"> |
||||
{{item.INTERFACE_NAME}} |
||||
</td> |
||||
<td style="background-color: #fffbf2"> |
||||
{{item.OBJECT_FIELD_TYPE}} |
||||
</td> |
||||
<td style="background-color: #fffbf2"> |
||||
{{item.OBJECT_DICT_NAME}} |
||||
</td> |
||||
<td> |
||||
<button |
||||
@click="deleteField(index)" |
||||
class="table-item-button" |
||||
title="删除" |
||||
> |
||||
<i class="mdi mdi-delete"></i> |
||||
</button> |
||||
</td> |
||||
</tr> |
||||
<tr v-show="isEditing"> |
||||
<td style="width: 150px">{{data.length + 1}}</td> |
||||
<td |
||||
style=" |
||||
background-color: #f5f9ff; |
||||
position: relative; |
||||
" |
||||
> |
||||
<input |
||||
v-model="submitData.SYSTEM_FIELD" |
||||
class="table-item-select" |
||||
placeholder="请输入字段名" |
||||
style=" |
||||
z-index: 1; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 0%; |
||||
width: 80%; |
||||
border: none; |
||||
transform: translateY(-50%) translateX(10%); |
||||
" |
||||
/> |
||||
<select |
||||
id="localSelect" |
||||
class="table-item-select" |
||||
style=" |
||||
position: absolute; |
||||
z-index: 0; |
||||
top: 50%; |
||||
left: 0%; |
||||
width: 90%; |
||||
transform: translateY(-50%) translateX(10%); |
||||
" |
||||
title="请选择字段名称" |
||||
@change="localChange" |
||||
> |
||||
<option |
||||
v-for="(type,index) in Object.keys(localJsonData)" |
||||
:key="index" |
||||
:value="type" |
||||
> |
||||
<section>{{type}}</section> |
||||
</option> |
||||
</select> |
||||
</td> |
||||
<td style="background-color: #f5f9ff"> |
||||
<input |
||||
v-model="submitData.SYSTEM_NAME" |
||||
class="table-item-input" |
||||
placeholder="请输入字段名" |
||||
/> |
||||
</td> |
||||
<td style="background-color: #f5f9ff"> |
||||
<select |
||||
v-model="submitData.SYSTEM_FIELD_TYPE" |
||||
class="table-item-input" |
||||
placeholder="请选择字段类型" |
||||
> |
||||
<option |
||||
v-for="type in dict.filedType" |
||||
:key="type.VALUE" |
||||
:value="type.VALUE" |
||||
> |
||||
{{type.LABEL}} |
||||
</option> |
||||
</select> |
||||
</td> |
||||
<td style="background-color: #f5f9ff"> |
||||
<input |
||||
v-model="submitData.SYSTEM_DICT_NAME" |
||||
class="table-item-input" |
||||
placeholder="请输入字典名称" |
||||
:style="{display: submitData.SYSTEM_FIELD_TYPE == 'dict' ? 'block' : 'none'}" |
||||
/> |
||||
</td> |
||||
<td |
||||
style=" |
||||
background-color: #fffbf2; |
||||
position: relative; |
||||
" |
||||
> |
||||
<input |
||||
v-model="submitData.INTERFACE_FIELD" |
||||
class="table-item-select" |
||||
placeholder="请输入字段名" |
||||
style=" |
||||
z-index: 1; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 0%; |
||||
width: 80%; |
||||
border: none; |
||||
transform: translateY(-50%) translateX(10%); |
||||
" |
||||
/> |
||||
<select |
||||
id="thridSelect" |
||||
class="table-item-select" |
||||
style=" |
||||
position: absolute; |
||||
z-index: 0; |
||||
top: 50%; |
||||
left: 0%; |
||||
width: 90%; |
||||
transform: translateY(-50%) translateX(10%); |
||||
" |
||||
title="请选择字段名称" |
||||
@change="thridChange" |
||||
> |
||||
<option |
||||
v-for="(type,index) in Object.keys(thirdJsonData)" |
||||
:key="index" |
||||
:value="type" |
||||
> |
||||
{{type}} |
||||
</option> |
||||
</select> |
||||
</td> |
||||
<td style="background-color: #fffbf2"> |
||||
<input |
||||
v-model="submitData.INTERFACE_NAME" |
||||
class="table-item-input" |
||||
placeholder="请输入字段注释" |
||||
/> |
||||
</td> |
||||
<td style="background-color: #fffbf2"> |
||||
<select |
||||
v-model="submitData.OBJECT_FIELD_TYPE" |
||||
class="table-item-input" |
||||
placeholder="请选择字段类型" |
||||
> |
||||
<option |
||||
v-for="type in dict.filedType" |
||||
:key="type.VALUE" |
||||
:value="type.VALUE" |
||||
> |
||||
{{type.LABEL}} |
||||
</option> |
||||
</select> |
||||
</td> |
||||
<td style="background-color: #fffbf2"> |
||||
<input |
||||
v-model="submitData.OBJECT_DICT_NAME" |
||||
class="table-item-input" |
||||
placeholder="请输入字典名称" |
||||
:style="{display: submitData.OBJECT_FIELD_TYPE == 'dict' ? 'block' : 'none'}" |
||||
/> |
||||
</td> |
||||
<td> |
||||
<button |
||||
@click="saveField(index)" |
||||
class="table-item-button" |
||||
title="保存" |
||||
> |
||||
<i class="mdi mdi-content-save"></i> |
||||
</button> |
||||
<button |
||||
@click="cancelField(index)" |
||||
class="table-item-button" |
||||
title="取消" |
||||
> |
||||
<i class="mdi mdi-cancel"></i> |
||||
</button> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
<section class="footer"> |
||||
<section class="footer-item"> |
||||
<button |
||||
class="footer-item-button" |
||||
style="background-color: #419ff8; color: #fff" |
||||
@click="addNewField" |
||||
> |
||||
<i class="mdi mdi-plus"></i> 新增字段 |
||||
</button> |
||||
</section> |
||||
<section class="footer-item"> |
||||
<button |
||||
class="footer-item-button" |
||||
style="background-color: #ff8903; color: #fff" |
||||
@click="cancelAll" |
||||
> |
||||
<i class="mdi mdi-close"></i>取消 |
||||
</button> |
||||
<button |
||||
class="footer-item-button" |
||||
style="background-color: #01c853; color: #fff" |
||||
@click="saveAll" |
||||
> |
||||
<i class="mdi mdi-check"></i>保存 |
||||
</button> |
||||
</section> |
||||
</section> |
||||
</section> |
||||
</div> |
||||
<script> |
||||
var vueObj = new Vue({ |
||||
el: '#apibox', |
||||
data() { |
||||
return { |
||||
dict: { |
||||
filedType: [], |
||||
}, |
||||
isEditing: true, |
||||
data: [ |
||||
{ |
||||
SYSTEM_NAME: '测试1', |
||||
SYSTEM_FIELD: 'test1', |
||||
INTERFACE_NAME: '测试2', |
||||
INTERFACE_FIELD: 'test2', |
||||
SYSTEM_FIELD_TYPE: 'value', |
||||
SYSTEM_DICT_NAME: '', |
||||
OBJECT_FIELD_TYPE: 'value', |
||||
OBJECT_DICT_NAME: '', |
||||
}, |
||||
{ |
||||
SYSTEM_NAME: '测试2', |
||||
SYSTEM_FIELD: 'test2', |
||||
INTERFACE_NAME: '测试3', |
||||
INTERFACE_FIELD: 'test3', |
||||
SYSTEM_FIELD_TYPE: 'value', |
||||
SYSTEM_DICT_NAME: '', |
||||
OBJECT_FIELD_TYPE: 'value', |
||||
OBJECT_DICT_NAME: '', |
||||
}, |
||||
], |
||||
localJsonData: {}, |
||||
localJosnName: '', |
||||
thirdJsonData: {}, |
||||
thirdJsonName: '', |
||||
submitData: { |
||||
SYSTEM_NAME: '', |
||||
SYSTEM_FIELD: '', |
||||
INTERFACE_NAME: '', |
||||
INTERFACE_FIELD: '', |
||||
SYSTEM_FIELD_TYPE: 'value', |
||||
SYSTEM_DICT_NAME: '', |
||||
OBJECT_FIELD_TYPE: 'value', |
||||
OBJECT_DICT_NAME: '', |
||||
}, |
||||
cachesData: { |
||||
ID: 0.0, |
||||
OBJECT_TABLE_NAME: 'test2', |
||||
OBJECT_TABLE_CNNAME: '测试2', |
||||
SYSTEM_TABLE_CNNAME: '测试1', |
||||
SYSTEM_TABLE_NAME: 'test1', |
||||
}, |
||||
} |
||||
}, |
||||
created() { |
||||
this.getDictOption() |
||||
}, |
||||
mounted() {}, |
||||
methods: { |
||||
getDictOption() { |
||||
axios |
||||
.get( |
||||
'/dict_data/simpleList?type=std_filed_type', |
||||
jwHeader |
||||
) |
||||
.then(res => { |
||||
this.dict.filedType = res.data |
||||
}) |
||||
}, |
||||
uploadLocalFile() { |
||||
document.getElementById('localFile').click() |
||||
document.getElementById('localFile').onchange = |
||||
() => { |
||||
const file = |
||||
document.getElementById('localFile').files[0] |
||||
this.localJosnName = file.name |
||||
const reader = new FileReader() |
||||
reader.readAsText(file) |
||||
reader.onload = () => { |
||||
this.localJsonData = JSON.parse(reader.result) |
||||
} |
||||
} |
||||
}, |
||||
uploadThirdFile() { |
||||
document.getElementById('thirdFile').click() |
||||
document.getElementById('thirdFile').onchange = |
||||
() => { |
||||
const file = |
||||
document.getElementById('thirdFile').files[0] |
||||
this.thirdJsonName = file.name |
||||
const reader = new FileReader() |
||||
reader.readAsText(file) |
||||
reader.onload = () => { |
||||
this.thirdJsonData = JSON.parse(reader.result) |
||||
} |
||||
} |
||||
}, |
||||
addNewField() { |
||||
this.submitData = { |
||||
SYSTEM_NAME: '', |
||||
SYSTEM_FIELD: '', |
||||
INTERFACE_NAME: '', |
||||
INTERFACE_FIELD: '', |
||||
SYSTEM_FIELD_TYPE: 'value', |
||||
SYSTEM_DICT_NAME: '', |
||||
OBJECT_FIELD_TYPE: 'value', |
||||
OBJECT_DICT_NAME: '', |
||||
} |
||||
this.isEditing = true |
||||
}, |
||||
saveField(index) { |
||||
this.data.push(this.submitData) |
||||
this.isEditing = false |
||||
}, |
||||
cancelField(index) { |
||||
this.submitData = { |
||||
SYSTEM_NAME: '', |
||||
SYSTEM_FIELD: '', |
||||
INTERFACE_NAME: '', |
||||
INTERFACE_FIELD: '', |
||||
SYSTEM_FIELD_TYPE: 'value', |
||||
SYSTEM_DICT_NAME: '', |
||||
OBJECT_FIELD_TYPE: 'value', |
||||
OBJECT_DICT_NAME: '', |
||||
} |
||||
this.isEditing = false |
||||
}, |
||||
deleteField(index) { |
||||
this.data.splice(index, 1) |
||||
}, |
||||
thridChange(e) { |
||||
this.submitData.INTERFACE_FIELD = e.target.value |
||||
}, |
||||
localChange(e) { |
||||
this.submitData.SYSTEM_FIELD = e.target.value |
||||
}, |
||||
saveAll() { |
||||
if ( |
||||
this.cachesData.SYSTEM_TABLE_NAME === '' || |
||||
this.cachesData.OBJECT_TABLE_NAME === '' |
||||
) { |
||||
tools.alert('请输入表名') |
||||
return |
||||
} |
||||
if (this.data.length === 0) { |
||||
tools.alert('请输入字段') |
||||
return |
||||
} |
||||
const data = this.data.map(i => { |
||||
return { |
||||
...this.cachesData, |
||||
...i, |
||||
} |
||||
}) |
||||
console.log(data) |
||||
axios |
||||
.post( |
||||
`/std_filed/createBatch`, |
||||
{ Data: JSON.stringify(data) }, |
||||
jwHeader |
||||
) |
||||
.then(res => { |
||||
tools.highlightErrorFields(res.data) |
||||
// window.location.href = './std_filed_map.html' |
||||
}) |
||||
.catch(error => { |
||||
tools.alert(error.message) |
||||
}) |
||||
}, |
||||
cancelAll() { |
||||
window.location.href = './std_filed_map.html' |
||||
}, |
||||
}, |
||||
}) |
||||
</script> |
||||
@ -1,271 +1,324 @@
|
||||
var isLoading = false; |
||||
var isLoading = false |
||||
var tools = { |
||||
highlightErrorFields: function (data) { |
||||
if (!data.ErrorParameters) { |
||||
tools.alert(data.message); |
||||
return; |
||||
} |
||||
data.ErrorParameters.forEach(function (error) { |
||||
// 获取 Name 属性的值 |
||||
var fieldName = error.Name; |
||||
highlightErrorFields: function (data) { |
||||
if (!data.ErrorParameters) { |
||||
tools.alert(data.message) |
||||
return |
||||
} |
||||
data.ErrorParameters.forEach(function (error) { |
||||
// 获取 Name 属性的值 |
||||
var fieldName = error.Name |
||||
|
||||
// 查找具有相同 name 属性值的所有元素 |
||||
var elements = document.getElementsByName(fieldName); |
||||
// 查找具有相同 name 属性值的所有元素 |
||||
var elements = document.getElementsByName(fieldName) |
||||
|
||||
// 循环遍历找到的元素，设置样式 |
||||
for (var i = 0; i < elements.length; i++) { |
||||
elements[i].style.border = "2px solid red"; |
||||
// 循环遍历找到的元素，设置样式 |
||||
for (var i = 0; i < elements.length; i++) { |
||||
elements[i].style.border = '2px solid red' |
||||
|
||||
var spanElement = document.createElement("span"); |
||||
spanElement.style.color = "red"; |
||||
spanElement.style.marginLeft = "5px"; // 调整距离，可根据需要更改 |
||||
spanElement.innerHTML = error.Message; |
||||
var spanElement = document.createElement('span') |
||||
spanElement.style.color = 'red' |
||||
spanElement.style.marginLeft = '5px' // 调整距离，可根据需要更改 |
||||
spanElement.innerHTML = error.Message |
||||
|
||||
// 将 span 元素添加到当前元素的后面 |
||||
elements[i].parentNode.insertBefore(spanElement, elements[i].nextSibling); |
||||
} |
||||
setTimeout(function () { |
||||
for (var i = 0; i < elements.length; i++) { |
||||
elements[i].style.border = ""; |
||||
// 移除当前元素后面的 span 元素 |
||||
var nextSibling = elements[i].nextSibling; |
||||
if (nextSibling && nextSibling.tagName === "SPAN") { |
||||
elements[i].parentNode.removeChild(nextSibling); |
||||
} |
||||
} |
||||
}, 3000); |
||||
}); |
||||
}, |
||||
alert: function (msg) { |
||||
$(divAlertBody).html(msg); |
||||
btnAlert.click(); |
||||
}, |
||||
objectToQueryString: function (obj) { |
||||
return Object.keys(obj) |
||||
.filter(key => obj[key] !== null && obj[key] !== undefined) // Filter out null and undefined values |
||||
.map(key => key + '=' + encodeURIComponent(obj[key])) |
||||
.join('&'); |
||||
}, |
||||
formToJson: function (formId) { |
||||
var form = document.getElementById(formId); |
||||
var formData = new FormData(form); |
||||
var jsonData = {}; |
||||
// 将 span 元素添加到当前元素的后面 |
||||
elements[i].parentNode.insertBefore( |
||||
spanElement, |
||||
elements[i].nextSibling |
||||
) |
||||
} |
||||
setTimeout(function () { |
||||
for (var i = 0; i < elements.length; i++) { |
||||
elements[i].style.border = '' |
||||
// 移除当前元素后面的 span 元素 |
||||
var nextSibling = elements[i].nextSibling |
||||
if ( |
||||
nextSibling && |
||||
nextSibling.tagName === 'SPAN' |
||||
) { |
||||
elements[i].parentNode.removeChild(nextSibling) |
||||
} |
||||
} |
||||
}, 3000) |
||||
}) |
||||
}, |
||||
alert: function (msg) { |
||||
$(divAlertBody).html(msg) |
||||
btnAlert.click() |
||||
}, |
||||
objectToQueryString: function (obj) { |
||||
return Object.keys(obj) |
||||
.filter( |
||||
key => obj[key] !== null && obj[key] !== undefined |
||||
) // Filter out null and undefined values |
||||
.map(key => key + '=' + encodeURIComponent(obj[key])) |
||||
.join('&') |
||||
}, |
||||
formToJson: function (formId) { |
||||
var form = document.getElementById(formId) |
||||
var formData = new FormData(form) |
||||
var jsonData = {} |
||||
|
||||
formData.forEach(function (value, key) { |
||||
jsonData[key] = value; |
||||
}); |
||||
formData.forEach(function (value, key) { |
||||
jsonData[key] = value |
||||
}) |
||||
|
||||
return jsonData; |
||||
}, |
||||
isValidURLPattern: function (inputString) { |
||||
var url = "https://www.rezero.com" + inputString; |
||||
var pattern = /^((http|https|ftp):\/\/)?([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,6}(\/[a-zA-Z0-9_.-]*)*\/?$/; |
||||
return (pattern.test(url)); |
||||
}, |
||||
ensureNumeric: function (inputField) { |
||||
// 尝试将输入值转换为数字 |
||||
var value = inputField.value; |
||||
return jsonData |
||||
}, |
||||
isValidURLPattern: function (inputString) { |
||||
var url = 'https://www.rezero.com' + inputString |
||||
var pattern = |
||||
/^((http|https|ftp):\/\/)?([a-zA-Z0-9_-]+\.)+[a-zA-Z]{2,6}(\/[a-zA-Z0-9_.-]*)*\/?$/ |
||||
return pattern.test(url) |
||||
}, |
||||
ensureNumeric: function (inputField) { |
||||
// 尝试将输入值转换为数字 |
||||
var value = inputField.value |
||||
|
||||
// 尝试将输入值转换为数字 |
||||
var numericValue = parseFloat(value); |
||||
// 尝试将输入值转换为数字 |
||||
var numericValue = parseFloat(value) |
||||
|
||||
// 如果转换失败，则将值设置为 0 |
||||
if (isNaN(numericValue)) { |
||||
numericValue = 0; |
||||
} |
||||
// 如果转换失败，则将值设置为 0 |
||||
if (isNaN(numericValue)) { |
||||
numericValue = 0 |
||||
} |
||||
|
||||
// 将更新后的值设置回输入框 |
||||
inputField.value = numericValue; |
||||
}, |
||||
showSpecifiedElementAndHideOthers: function (elementToShowId, elementsToHideIds) { |
||||
// 显示指定元素并隐藏其他元素 |
||||
document.getElementById(elementToShowId).style.display = "block"; |
||||
for (var i = 0; i < elementsToHideIds.length; i++) { |
||||
document.getElementById(elementsToHideIds[i]).style.display = "none"; |
||||
} |
||||
}, |
||||
assignValuesToObject: function (sourceObject, targetObject) { |
||||
Object.keys(sourceObject).forEach(function (key) { |
||||
if (targetObject.hasOwnProperty(key)) { |
||||
targetObject[key] = sourceObject[key]; |
||||
} else { |
||||
console.warn(`Property '${key}' does not exist in the target object.`); |
||||
} |
||||
}); |
||||
}, |
||||
openLoading: function () { |
||||
var loadingOverlay = document.getElementById('loadingOverlay'); |
||||
loadingOverlay.style.display = 'flex'; |
||||
}, |
||||
closeLoading: function () { |
||||
var loadingOverlay = document.getElementById('loadingOverlay'); |
||||
loadingOverlay.style.display = 'none'; |
||||
}, |
||||
getValue: function (id) { |
||||
var element = document.getElementById(id); |
||||
if (element) { |
||||
return element.value; |
||||
} else { |
||||
return null; |
||||
} |
||||
}, |
||||
checkAuthorization: function () { |
||||
setTimeout(function () { |
||||
// 将更新后的值设置回输入框 |
||||
inputField.value = numericValue |
||||
}, |
||||
showSpecifiedElementAndHideOthers: function ( |
||||
elementToShowId, |
||||
elementsToHideIds |
||||
) { |
||||
// 显示指定元素并隐藏其他元素 |
||||
document.getElementById(elementToShowId).style.display = |
||||
'block' |
||||
for (var i = 0; i < elementsToHideIds.length; i++) { |
||||
document.getElementById( |
||||
elementsToHideIds[i] |
||||
).style.display = 'none' |
||||
} |
||||
}, |
||||
assignValuesToObject: function ( |
||||
sourceObject, |
||||
targetObject |
||||
) { |
||||
Object.keys(sourceObject).forEach(function (key) { |
||||
if (targetObject.hasOwnProperty(key)) { |
||||
targetObject[key] = sourceObject[key] |
||||
} else { |
||||
console.warn( |
||||
`Property '${key}' does not exist in the target object.` |
||||
) |
||||
} |
||||
}) |
||||
}, |
||||
openLoading: function () { |
||||
var loadingOverlay = document.getElementById( |
||||
'loadingOverlay' |
||||
) |
||||
loadingOverlay.style.display = 'flex' |
||||
}, |
||||
closeLoading: function () { |
||||
var loadingOverlay = document.getElementById( |
||||
'loadingOverlay' |
||||
) |
||||
loadingOverlay.style.display = 'none' |
||||
}, |
||||
getValue: function (id) { |
||||
var element = document.getElementById(id) |
||||
if (element) { |
||||
return element.value |
||||
} else { |
||||
return null |
||||
} |
||||
}, |
||||
checkAuthorization: function () { |
||||
setTimeout(function () { |
||||
var tokeEle = document.getElementById('txtToken') |
||||
if (tokeEle) return |
||||
|
||||
var tokeEle = document.getElementById("txtToken"); |
||||
if (tokeEle) return; |
||||
axios |
||||
.get( |
||||
'/PrivateReZeroRoute/100004/GetDbTypeList', |
||||
jwHeader |
||||
) |
||||
.then(response => { |
||||
this.dbTypeList = response.data |
||||
isLoading = true |
||||
this.error = null |
||||
}) |
||||
.catch(error => { |
||||
isLoading = true |
||||
this.error = error.message |
||||
this.data = null |
||||
}) |
||||
}, 3000) |
||||
}, |
||||
jsonToUrl: function (json) { |
||||
return Object.keys(json) |
||||
.map(function (key) { |
||||
return ( |
||||
encodeURIComponent(key) + |
||||
'=' + |
||||
encodeURIComponent(json[key]) |
||||
) |
||||
}) |
||||
.join('&') |
||||
}, |
||||
initColor: function () { |
||||
if (localStorage.BgColorType == 1) { |
||||
document.body.setAttribute('data-theme', 'dark') |
||||
} else if (localStorage.BgColorType !== 'default') { |
||||
document.body.setAttribute('data-theme', 'default') |
||||
} |
||||
var dropdown = document.querySelector( |
||||
'.dropdown-skin.open' |
||||
) |
||||
|
||||
axios.get("/PrivateReZeroRoute/100004/GetDbTypeList", jwHeader) |
||||
.then(response => { |
||||
this.dbTypeList = response.data; |
||||
isLoading = true; |
||||
this.error = null; |
||||
}) |
||||
.catch(error => { |
||||
isLoading = true; |
||||
this.error = error.message; |
||||
this.data = null; |
||||
}); |
||||
}, 3000) |
||||
}, |
||||
jsonToUrl: function (json) { |
||||
return Object.keys(json).map(function (key) { |
||||
return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]); |
||||
}).join('&'); |
||||
}, |
||||
initColor: function () { |
||||
if (localStorage.BgColorType == 1) { |
||||
document.body.setAttribute('data-theme', 'dark'); |
||||
} else if (localStorage.BgColorType !== 'default') { |
||||
document.body.setAttribute('data-theme', 'default'); |
||||
} |
||||
var dropdown = document.querySelector('.dropdown-skin.open'); |
||||
if (dropdown) { |
||||
// 移除 "open" 类，添加 "close" 类 |
||||
dropdown.classList.remove('open') |
||||
dropdown.classList.add('close') |
||||
} |
||||
}, |
||||
appendQueryParams: function (url) { |
||||
// 从当前 URL 中提取查询参数 |
||||
const searchParams = new URLSearchParams( |
||||
window.location.search |
||||
) |
||||
const params = {} |
||||
|
||||
if (dropdown) { |
||||
// 移除 "open" 类，添加 "close" 类 |
||||
dropdown.classList.remove('open'); |
||||
dropdown.classList.add('close'); |
||||
} |
||||
}, |
||||
appendQueryParams: function (url) { |
||||
// 从当前 URL 中提取查询参数 |
||||
const searchParams = new URLSearchParams(window.location.search); |
||||
const params = {}; |
||||
// 动态提取 token 和 model |
||||
if (searchParams.has('token')) { |
||||
params.token = searchParams.get('token') |
||||
} |
||||
if (searchParams.has('model')) { |
||||
params.model = searchParams.get('model') |
||||
} |
||||
|
||||
// 动态提取 token 和 model |
||||
if (searchParams.has('token')) { |
||||
params.token = searchParams.get('token'); |
||||
} |
||||
if (searchParams.has('model')) { |
||||
params.model = searchParams.get('model'); |
||||
} |
||||
// 如果没有参数，直接返回原始 URL |
||||
if (Object.keys(params).length === 0) { |
||||
return url |
||||
} |
||||
|
||||
// 如果没有参数，直接返回原始 URL |
||||
if (Object.keys(params).length === 0) { |
||||
return url; |
||||
} |
||||
// 检查 URL 是否已经包含查询参数 |
||||
const separator = url.includes('?') ? '&' : '?' |
||||
|
||||
// 检查 URL 是否已经包含查询参数 |
||||
const separator = url.includes('?') ? '&' : '?'; |
||||
// 将参数对象转换为查询字符串 |
||||
const queryString = Object.keys(params) |
||||
.map( |
||||
key => |
||||
`${encodeURIComponent(key)}=${encodeURIComponent( |
||||
params[key] |
||||
)}` |
||||
) |
||||
.join('&') |
||||
|
||||
// 将参数对象转换为查询字符串 |
||||
const queryString = Object.keys(params) |
||||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`) |
||||
.join('&'); |
||||
|
||||
// 拼接 URL 和查询参数 |
||||
return url + separator + queryString; |
||||
}, |
||||
validateDatalist: function (ele, datalistId) { |
||||
const input = ele; |
||||
const list = document.getElementById(datalistId); |
||||
const options = list && list.options; |
||||
const value = input.value; |
||||
let isValid = false; |
||||
if (options) { |
||||
for (let i = 0; i < options.length; i++) { |
||||
if (value === options[i].value) { |
||||
isValid = true; |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
if (!isValid) { |
||||
input.value = ''; |
||||
} |
||||
}, |
||||
copyText: function (text) |
||||
{ |
||||
navigator.clipboard.writeText(text).then(() => { |
||||
tools.alert("复制成功"); |
||||
}).catch(err => { |
||||
tools.alert("复制失败"); |
||||
}); |
||||
}, |
||||
formatDate: function (date) { |
||||
if (!date) return ''; |
||||
const d = new Date(date); |
||||
const month = '' + (d.getMonth() + 1); |
||||
const day = '' + d.getDate(); |
||||
const year = d.getFullYear(); |
||||
return [year, month.padStart(2, '0'), day.padStart(2, '0')].join('-'); |
||||
} |
||||
// 拼接 URL 和查询参数 |
||||
return url + separator + queryString |
||||
}, |
||||
validateDatalist: function (ele, datalistId) { |
||||
const input = ele |
||||
const list = document.getElementById(datalistId) |
||||
const options = list && list.options |
||||
const value = input.value |
||||
let isValid = false |
||||
if (options) { |
||||
for (let i = 0; i < options.length; i++) { |
||||
if (value === options[i].value) { |
||||
isValid = true |
||||
break |
||||
} |
||||
} |
||||
} |
||||
if (!isValid) { |
||||
input.value = '' |
||||
} |
||||
}, |
||||
copyText: function (text) { |
||||
navigator.clipboard |
||||
.writeText(text) |
||||
.then(() => { |
||||
tools.alert('复制成功') |
||||
}) |
||||
.catch(err => { |
||||
tools.alert('复制失败') |
||||
}) |
||||
}, |
||||
formatDate: function (date) { |
||||
if (!date) return '' |
||||
const d = new Date(date) |
||||
const month = '' + (d.getMonth() + 1) |
||||
const day = '' + d.getDate() |
||||
const year = d.getFullYear() |
||||
return [ |
||||
year, |
||||
month.padStart(2, '0'), |
||||
day.padStart(2, '0'), |
||||
].join('-') |
||||
}, |
||||
} |
||||
Array.prototype.removeArrayItem = function (item) { |
||||
const index = this.indexOf(item); |
||||
if (index !== -1) { |
||||
this.splice(index, 1); |
||||
} |
||||
return this; |
||||
}; |
||||
const index = this.indexOf(item) |
||||
if (index !== -1) { |
||||
this.splice(index, 1) |
||||
} |
||||
return this |
||||
} |
||||
setTimeout(function () { |
||||
// 设置请求拦截器 |
||||
axios.interceptors.request.use(function (config) { |
||||
if (isLoading) { |
||||
tools.openLoading(); |
||||
} |
||||
return config; |
||||
}, function (error) { |
||||
// 对请求错误做些什么 |
||||
return Promise.reject(error); |
||||
}); |
||||
|
||||
// 设置响应拦截器 |
||||
axios.interceptors.response.use(function (response) { |
||||
if (isLoading) { |
||||
tools.closeLoading(); |
||||
} |
||||
return response; |
||||
}, function (error) { |
||||
if (error.response) { |
||||
// 请求已发出，但服务器响应的状态码不在 2xx 范围内 |
||||
if (error.response.status === 401) { |
||||
if (isLoading) { |
||||
tools.closeLoading(); |
||||
} |
||||
tools.alert("授权失败，自动跳到授权页面"); |
||||
// 如果是401错误（未授权），则跳转到登录页面 |
||||
setTimeout(function () { |
||||
if (isloginPage) { |
||||
window.location.href = '/rezero/login.html'; |
||||
} else { |
||||
window.location.href = '/rezero/authorization.html'; |
||||
} |
||||
}, 2000); |
||||
|
||||
} else { |
||||
// 处理其他状态码 |
||||
return Promise.reject(error); |
||||
} |
||||
} else if (error.request) { |
||||
// 请求已发出，但没有收到响应 |
||||
console.log('Request:', error.request); |
||||
return Promise.reject(error); |
||||
} else { |
||||
// 发生一些其他问题在设置请求时触发了一个错误 |
||||
console.log('Error', error.message); |
||||
return Promise.reject(error); |
||||
} |
||||
}); |
||||
// 设置请求拦截器 |
||||
axios.interceptors.request.use( |
||||
function (config) { |
||||
if (isLoading) { |
||||
tools.openLoading() |
||||
} |
||||
return config |
||||
}, |
||||
function (error) { |
||||
// 对请求错误做些什么 |
||||
return Promise.reject(error) |
||||
} |
||||
) |
||||
|
||||
},2000) |
||||
// 设置响应拦截器 |
||||
axios.interceptors.response.use( |
||||
function (response) { |
||||
if (isLoading) { |
||||
tools.closeLoading() |
||||
} |
||||
return response |
||||
}, |
||||
function (error) { |
||||
if (error.response) { |
||||
// 请求已发出，但服务器响应的状态码不在 2xx 范围内 |
||||
if (error.response.status === 401) { |
||||
if (isLoading) { |
||||
tools.closeLoading() |
||||
} |
||||
tools.alert('授权失败，自动跳到授权页面') |
||||
// 如果是401错误（未授权），则跳转到登录页面 |
||||
setTimeout(function () { |
||||
if (isloginPage) { |
||||
window.location.href = '/rezero/login.html' |
||||
} else { |
||||
window.location.href = |
||||
'/rezero/authorization.html' |
||||
} |
||||
}, 2000) |
||||
} else { |
||||
// 处理其他状态码 |
||||
return Promise.reject(error) |
||||
} |
||||
} else if (error.request) { |
||||
// 请求已发出，但没有收到响应 |
||||
console.log('Request:', error.request) |
||||
return Promise.reject(error) |
||||
} else { |
||||
// 发生一些其他问题在设置请求时触发了一个错误 |
||||
console.log('Error', error.message) |
||||
return Promise.reject(error) |
||||
} |
||||
} |
||||
) |
||||
}, 2000) |
||||
|
||||
Loading…
Reference in new issue