You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
736 lines
19 KiB
736 lines
19 KiB
@@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: [ |
|
|
|
|
|
], |
|
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: { |
|
|
|
OBJECT_TABLE_NAME: "", |
|
OBJECT_TABLE_CNNAME: "", |
|
SYSTEM_TABLE_CNNAME: "", |
|
SYSTEM_TABLE_NAME: "", |
|
}, |
|
}; |
|
}, |
|
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( |
|
`/api/200100/stdobjectmappingcontroller/insertlist`, |
|
{ list: 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>
|
|
|