npm install json-editor-vue3 --save

import "jsoneditor";

import JsonEditorVue from 'json-editor-vue3';

<json-editor-vue ref="jsonEditor" class="editor" v-model="state.addFormField.powerTypes" @keyup="jsonValidate" />

<template>
  <div>
    <div class="card-wrap" style="padding: 0 12px;">
      <el-form :model="state.queryParams" ref="queryRef" :inline="true" class="form-search-wrap">
        <el-form-item label="code">
          <el-input v-model="state.queryParams.code" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList()">Search</el-button>
          <el-button icon="Refresh" @click="resetSearchForm">Reset</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card-wrap" style="padding-bottom: 100px;">
      <div class="operation-wrap">
        <el-button type="primary" @click="handleEdit(null, 1)">Add</el-button>
        <el-button type="danger" @click="batchRemove" >Remove</el-button>
      </div>
      <el-table :data="state.tableData"
                v-loading="state.loading"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="Code"></el-table-column>
        <el-table-column prop="value" label="Value"></el-table-column>
        <el-table-column prop="i18n" label="I18n"></el-table-column>
        <el-table-column label="Operation" align="center">
          <template #default="scope">
            <el-button type="primary" icon="Edit" @click="handleEdit(scope.row, 0)" circle />
            <el-button type="danger" icon="Delete" @click="remove(scope.row.id, 0)" circle />
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="state.queryParams.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="state.queryParams.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="state.queryParams.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="state.type?'add':'update'" v-model="state.dialogVisible" width="30%"  destroy-on-close @close='resetForm'>
      <el-form ref="addForm" :rules="state.rules" :model="state.addFormField" label-width="100px">
        <el-form-item label="code" prop="code">
          <el-input v-model="state.addFormField.code" style="width: 80%;" ></el-input>
        </el-form-item>
        <el-form-item label="value" prop="value">
          <el-input v-model="state.addFormField.value" style="width: 80%;" ></el-input>
        </el-form-item>
        <el-form-item label="i18n" prop="i18n">
          <el-input v-model="state.addFormField.i18n" style="width: 80%;" ></el-input>
        </el-form-item>
        <el-form-item label="numberOfEngine" prop="numberOfEngine">
          <el-input v-model="state.addFormField.numberOfEngine" style="width: 80%;" ></el-input>
        </el-form-item>
        <el-form-item label="powerTypes" prop="powerTypes">
          <json-editor-vue ref="jsonEditor" class="editor" v-model="state.addFormField.powerTypes" @keyup="jsonValidate" />
        </el-form-item>
        <el-form-item label="siebelCode" prop="siebelCode">
          <el-input v-model="state.addFormField.siebelCode" style="width: 80%;" ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="add">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as api from '@/api/dic/common';
import JsonEditorVue from 'json-editor-vue3';
const addForm = ref();
const jsonEditor = ref();
const moduleUrl = "boatType";
const state = reactive({
  multipleSelection: [],
  dialogVisible: false,
  jsonEditFlag: true,
  num: 1,
  loading: false,
  type: "add",
  tableData: [],
  addFormField: {
    id: "",
    code: "",
    value: "",
    i18n: "",
    numberOfEngine: "",
    powerTypes: "",
    siebelCode: "",
  },
  queryParams: {
    code: undefined,
    page: 1,
    size: 10,
    total: 0,
  },
  rules: {
    code: [
      { required: "true", message: "code is required", trigger: ["change"] },
    ],
    value: [
      { required: "true", message: "value is required", trigger: ["change"] },
    ],
    i18n: [
      { required: "true", message: "i18n is required", trigger: ["change"] },
    ],
  },
});
async function jsonValidate () {
  if (jsonEditor.value) {
    const res = await jsonEditor.value.editor.validate();
    if(res.length != 0){
      state.jsonEditFlag = false;
    }else {
      state.jsonEditFlag = true;
    }
  }
}
function handleSelectionChange(val) {
  state.multipleSelection = val
}
function commonRemove(idList) {
  ElMessageBox.confirm('Are you sure to remove this data?')
      .then(() => {
        api
            .remove({idList: idList}, moduleUrl)
            .then((res) => {
              ElMessage.success("success");
            })
            .finally(() => {
              state.loading = false;
            });
        setTimeout(() => {
          getList();
        }, 300);
      })
}
function remove(id){
  let idList = [];
  idList.push(id)
  commonRemove(idList);
}
function batchRemove() {
  if(state.multipleSelection == undefined || state.multipleSelection.length <= 0){
    ElMessage.warning("Please select checkbox");
    return;
  }
  let idList = [];
  state.multipleSelection.forEach((value, index) => {
    idList.push(value.id)
  });
  commonRemove(idList);
}
function handleEdit(row, type){
  if(row){
    state.addFormField = JSON.parse(JSON.stringify(row));
  }
  if (type) {
    state.type = true;
  } else{
    state.type = false;
  }
  state.dialogVisible = true;
}
function resetForm(){
  state.addFormField = {
    id: undefined,
    code: undefined,
    value: undefined,
    i18n: undefined,
  }
}
function resetSearchForm(){
  state.queryParams.code = undefined;
}
function add(){
  addForm.value.validate((valid) => {
    if(!state.jsonEditFlag){
      ElMessage.error("JSON input wrong format");
      return ;
    }
    if (valid) {
      let id = state.addFormField.id;
      if (id) {
        api
            .update(state.addFormField, moduleUrl)
            .then((res) => {
              ElMessage.success("success");
            })
            .finally(() => {
              state.loading = false;
            });
      }else{
        api
            .add(state.addFormField, moduleUrl)
            .then((res) => {
              ElMessage.success("success");
            })
            .finally(() => {
              state.loading = false;
            });
      }
      resetForm();
      state.dialogVisible = false;
      setTimeout(() => {
        getList();
      }, 200);
    } else {
      return false;
    }
  });
}
function getList(){
  state.loading = true;
  let data = {};
  if(state.queryParams){
    data = JSON.stringify(state.queryParams).replace(/:/g, '=').replace(/,/g, '&').replace(/{/g, '?').replace(/}/g, '').replace(/"/g, '');
  }
  api
      .getList(data, moduleUrl)
      .then((res) => {
        state.tableData = res.items;
        state.queryParams.page = res.page;
        state.queryParams.size = res.size;
        state.queryParams.total = res.total;
      })
      .finally(() => {
        state.loading = false;
      });
}
function handleSizeChange(val){
  state.queryParams.size = val;
  getList();
}
function handleCurrentChange(val){
  state.queryParams.page = val;
  getList();
}
getList();
</script>
<style scoped >
/deep/ .el-dialog{
  width: 50%;
}
/deep/ .el-form-item--default{
  margin-left: 30px;
}
.pagination {
  background: #fff;
  padding: 20px 10px 0;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}
.card-wrap{
  padding: 15px 20px 20px 20px;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: .3s;
  transition: .3s;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin: 10px;
}
.operation-wrap{
  margin: 0 0 16px 0;
}
.form-search-wrap{
  margin: 10px 0 0 12px;
}
</style>