src/components/json-schema/index.vue

<!--  -->
<template>
    <div>
        <div class="tree-part-test flex">
            <pre>{{ showData }}</pre>
            <el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false">
                <template #default="{ node, data }">
                    <span class="doc-tree-node mb6">
                        <el-input
                            v-model="data.label"
                            placeholder="请输入内容"
                            class="mr6"
                            size="small"
                            :disabled="data.disabled"
                            style="width:180px"
                        ></el-input>
                        <el-tooltip effect="dark" content="是否必须" placement="top" v-if="data.id != 1">
                            <el-checkbox v-model="data.required" style="margin-right:6px"></el-checkbox>
                        </el-tooltip>

                        <el-select
                            v-model="data.type"
                            class="mr6"
                            size="small"
                            :disabled="data.id === 1"
                            style="width:180px"
                            @change="val => handleSelect(val, data)"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                        <el-select
                            v-model="data.format"
                            class="mr6"
                            size="small"
                            v-if="['integer', 'number'].includes(data.type)"
                            style="width:180px"
                            placeholder="format方式"
                        >
                            <el-option v-for="item in formatOptions[data.type]" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                        <el-select
                            v-if="data.type === 'ref'"
                            v-model="data.$ref"
                            class="mr6"
                            size="small"
                            :disabled="data.id === 1"
                            style="width:180px"
                        >
                            <el-option v-for="item in definitionOptions" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>

                        <el-input
                            v-else
                            v-model="data.description"
                            placeholder="请输入内容"
                            class="mr6"
                            size="small"
                            style="width:200px"
                        ></el-input>
                        <span v-if="data.type === 'object'" class="classNameWrapper">
                            <el-input
                                v-model="data.title"
                                placeholder="请输入类名"
                                :class="['mr6', !data.title ? 'error-required' : '']"
                                size="small"
                                style="width:200px"
                            />
                            <div v-if="!data.title" class="tips">类名不能为空</div>
                        </span>

                        <span v-if="['object', 'array'].includes(data.type) && node.level == 2">
                            <span class="text-tips">引用：</span>
                            <el-switch v-model="data.defination" class="mr6"></el-switch>
                        </span>

                        <i
                            v-if="data.type === 'object'"
                            class="el-icon-plus mr12 ml6"
                            style="font-size:18px;color:#36f;font-weight:bolder"
                            @click="append(data)"
                        ></i>
                        <i
                            v-if="data.id !== 1"
                            class="el-icon-delete"
                            @click="remove(node, data)"
                            style="font-size:18px"
                        ></i>
                        <el-button v-if="node.level == 1" type="primary" size="mini" @click="dialogVisible = true">
                            导入
                        </el-button>
                    </span>
                </template>
            </el-tree>
        </div>
        <el-dialog title="提示" v-model="dialogVisible" width="30%" append-to-body>
            <!-- <el-input v-model="form.json" type="textarea" :rows="20"></el-input> -->
            <Monaco v-model:value="form.json"></Monaco>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleImport()">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { onMounted, reactive, ref, watch } from "vue";
import { getUUID } from "@/utils";
import { useStore } from "vuex";
import Monaco from "@/components/online-editor";

const options = [
    { label: "string", value: "string" },
    { label: "number", value: "number" },
    { label: "integer", value: "integer" },
    { label: "object", value: "object" },
    { label: "array", value: "array" },
    { label: "boolean", value: "boolean" },
    { label: "ref", value: "ref" }
];

const formatOptions = {
    integer: ["int32", "int64"],
    number: ["double", "float"]
};

let number = 0;
let missingTitle = false;

export default {
    components: { Monaco },
    props: {
        value: {
            type: String,
            default() {
                return JSON.stringify([
                    {
                        label: "root",
                        id: 1,
                        disabled: true,
                        title: "",
                        type: "object",
                        description: "root",
                        children: []
                    }
                ]);
            }
        }
    },

    setup(props, { emit }) {
        const store = useStore();
        const definitionOptions = ref(new Set());
        const dialogVisible = ref(false);
        const show = ref(false);

        const form = reactive({
            json: ""
        });
        const showData = ref({});
        const handleImport = () => {
            const res = transform(transformByImportJson(form.json));
            treeData.value = res;
            dialogVisible.value = false;
            setTimeout(() => {
                show.value = true;
            }, 1000);
        };
        const transformByImportJson = json => {
            json = JSON.parse(json);
            const process = (target, dataSource) => {
                target.properties = {};
                Object.keys(dataSource).forEach(key => {
                    const value = dataSource[key];
                    const type = typeof value;
                    console.log("value :>> ", value);
                    if (Array.isArray(value)) {
                        target.properties[key] = {
                            type: "array",
                            description: "",
                            items: {
                                type: "object",
                                properties: {}
                            }
                        };
                        console.log(target.properties[key].items, value[0]);
                        process(target.properties[key].items, value[0]);
                    } else {
                        target.properties[key] = {
                            type,
                            description: type === "object" ? "" : value
                        };
                        if (type === "object") {
                            process(target.properties[key], value);
                        }
                    }
                });
            };
            const res = {
                type: "object",
                description: "",
                title: ""
            };
            process(res, json);
            console.log("res :>> ", res);
            return JSON.stringify(res);
        };

        const transform = value => {
            let data;
            try {
                data = JSON.parse(value);
            } catch (error) {
                data = {
                    type: "object",
                    description: "root",
                    title: "",
                    properties: {},
                    definitions: {}
                };
            }
            //properties, definitions,
            const { description, title } = data;

            const res = [
                {
                    label: "root",
                    id: 1,
                    disabled: true,
                    type: "object",
                    title: title,
                    description: description,
                    children: []
                }
            ];

            const process = (schemaObj, treeObj) => {
                // console.log(11, schemaObj, treeObj);
                const properties = schemaObj.properties;
                const items = schemaObj.items;
                const definitions = schemaObj.definitions;
                const children = treeObj.children;
                // console.log("items :>> ", items);
                // if (!children) return;
                if (items) {
                    const child = {
                        label: "items",
                        type: items.type,
                        description: items.description,
                        disabled: true,
                        $ref: items.$ref ? items.$ref.split("#/definitions/")[1] : undefined,
                        children: []
                    };
                    process(items, child);
                    children.push(child);
                }
                properties &&
                    Object.keys(properties).forEach(key => {
                        const item = properties[key];

                        const child = {
                            label: key,
                            type: item.type,
                            description: item.description,
                            title: item.title,
                            format: ["integer", "number"].includes(item.type) ? item.format : undefined,
                            required: item.required,
                            id: getUUID(),
                            children: [],
                            disabled: schemaObj.type === "array"
                        };

                        if (item.type === "ref") {
                            child.$ref = item.$ref.split("#/definitions/")[1];
                        }

                        process(item, child);
                        children.push(child);
                    });
                definitions &&
                    Object.keys(definitions).forEach(key => {
                        const item = definitions[key];
                        const child = {
                            label: key,
                            type: item.type,
                            description: item.description,
                            title: item.title,
                            format: ["integer", "number"].includes(item.type) ? item.format : undefined,
                            required: item.required,
                            id: getUUID(),
                            defination: true,
                            children: []
                        };
                        process(item, child);
                        children.push(child);
                    });
            };

            process(data, res[0]);

            return res;
        };
        const treeData = ref(transform(props.value));

        const checkTitle = title => {
            missingTitle = !title;
        };
        watch(
            () => treeData,
            treeData => {
                const res = {
                    type: "object",
                    description: treeData.value[0].description,
                    title: treeData.value[0].title,
                    properties: {},
                    definitions: {}
                };
                checkTitle(treeData.value[0].title);

                const process = (children, target, parent) => {
                    if (!children) return;
                    children.forEach(item => {
                        target.properties = target.properties || {};
                        // console.log("target :>> ", target);
                        const child = {
                            type: item.type,
                            description: item.description,
                            title: item.type === "object" ? item.title : undefined,
                            format: ["integer", "number"].includes(item.type) ? item.format : undefined,
                            required: item.required
                        };
                        if (item.type === "object") checkTitle(item.title);
                        if (target.type === "array") {
                            delete target.properties;
                            target[item.label] = {
                                ...child,
                                $ref: item.type === "ref" ? `#/definitions/${item.$ref}` : undefined
                            };
                        } else {
                            target.properties[item.label] = {
                                ...child,
                                $ref: item.type === "ref" ? `#/definitions/${item.$ref}` : undefined
                            };
                        }

                        if (parent.defination) {
                            const copy = res.properties[parent.label] || res.definitions[parent.label];
                            definitionOptions.value.add(parent.label);

                            res.definitions[parent.label] = copy;
                            delete res.properties[parent.label];
                        }

                        if (item.children) {
                            // console.log("target :>> ", target);
                            if (target.type === "array") {
                                process(item.children, target[item.label], item);
                            } else {
                                process(item.children, target.properties[item.label], item);
                            }
                        }
                    });
                };
                process(treeData.value[0].children, res, treeData.value[0]);
                emit("update:value", JSON.stringify(res));
                store.commit("api/SET_TITLEREQUIRED", missingTitle);
                showData.value = res;
            },
            {
                deep: true, // 深度监听的参数
                immediate: true
            }
        );

        onMounted(() => {});

        const remove = (node, data) => {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
        };
        const append = data => {
            const newChild = {
                id: getUUID(),
                label: "field_" + number++,
                type: "string",
                description: "",
                title: "",
                children: []
            };
            if (!data.children) {
                data.children = [];
            }
            data.children.push(newChild);
        };
        const handleSelect = (val, data) => {
            if (val === "array") {
                const newChild = { id: getUUID(), label: "items", type: "string", children: [], disabled: true };
                if (!data.children) {
                    data.children = [];
                }
                data.children.push(newChild);
            }
            if (["integer", "number"].includes(val)) {
                data.format = "";
            }
        };

        return {
            treeData,
            remove,
            options,
            append,
            handleSelect,
            definitionOptions,
            showData,
            formatOptions,
            dialogVisible,
            handleImport,
            form,
            show
        };
    }
};
</script>
<style lang="scss">
.tree-part-test {
    .doc-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-right: 8px;
    }
    .el-tree-node__content {
        padding: 25px 0;
    }
    .el-tree-node__content {
        height: 50px;
    }
    .el-tree-node__content:hover {
        background-color: transparent;
    }
    pre {
        width: 300px;
        font-family: monospace;
        margin-top: 0;
        margin-bottom: 1em;
        overflow: auto;
        height: 100%;
        overflow-y: auto;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 12px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
    }
    .error-required .el-input__inner {
        border-color: #f56c6c;
    }
    .classNameWrapper {
        position: relative;
        .tips {
            color: #f56c6c;
            position: absolute;
            left: 0px;
            bottom: -27px;
            font-size: 12px;
        }
    }
}
</style>

使用

 <JsonSchema v-model:value="form.schema" />

效果图

image.png