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.
797 lines
17 KiB
797 lines
17 KiB
3 days ago
|
@@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>
|