npm install json-editor-vue3 --save
main.js
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>