@@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: {
           
          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(
            `/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>