vue编写接口管理工具

背景：项目需求编写一个类似Yapi代码管理工具功能，实现了一个简单版本的。(只列举一下params参数在线录入部分)

开发环境：

1. vue
2. element-ui@2.4.11

主要开发思路：

1. 层次关系  ---- 采用element-ui的tree组件
2. object，Array类型的特殊处理
3. 输入框禁用，必选按钮禁用

Yapi效果图：

自己实现简单版本  ：

 代码实现：

<template>
    <div>
            <el-tree :data="treeData" node-key="id" default-expand-all :expand-on-click-node="false" class="apiTree">    
                <el-row class="row-flex-middle row-middle" :gutter="24" slot-scope="{ node, data }">
                    <el-col :span="10">
                        <div class="row-flex-middle">
                       
                            <el-col :span="24">
                                <div class="row-flex-middle">
                                    <el-input size="small" style="width: 90%" v-model="data.key"
                                        :disabled="data.inputDisabled">
                                    </el-input>
                                    <el-checkbox v-model="data.checked" :disabled="data.checkedDiesbled"
                                        @change="checkboxChange(node,data)" class="checked">
                                    </el-checkbox>
                                </div>
                            </el-col>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="data.type" placeholder="请选择" size="small"
                            @change="handleChangeParamsType(node,data)">
                            <el-option v-for="item in typeList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-input size="small" v-model="data.description" placeholder="备注"
                            style="width: 85%;margin: 0 7.5%;"></el-input>
                    </el-col>
                    <el-col :span="2" class="col-item-setting">
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                            <span class="delete-item" @click="rootDelete(node,data)"><i
                                    class="el-icon-close"></i></span>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="新增" placement="top">
                            <span class="el-icon-plus" @click="rootAdd(node,data)" v-show="data.type == 4"></span>
                        </el-tooltip>
                    </el-col>
                </el-row>
            </el-tree>
    </div>
</template>
<script>
    export default {
        data() {

            return {
                root: {
                    key: "root",
                    disabled: true,
                    type: 4,
                    checked: false,
                    description: "",//备注
                },
                typeList: [
                    { label: "string", value: 1 },
                    { label: "number", value: 2 },
                    { label: "array", value: 3 },
                    { label: "object", value: 4 },
                    { label: "boolean", value: 5 },
                ],
                treeData: [
                    {
                        key: "root",
                        inputDisabled: true,
                        type: 4,
                        checked: false,
                        description: "",//备注
                        checkedDiesbled: false,//必填是否禁用
                        children: [
                        ]
                    }
                ],
            }
        },
        methods: {
            checkboxChange(node, data) {
                console.log(node, data);
            },
            handleChangeParamsType(node, data) {
                let { type } = data;
                if (type == 3) { //数组处理
                    this.$set(data, "children", []);
                    let assign = {
                        id: new Date().valueOf(),
                        key: "items",
                        inputDisabled: true,//输入框是否禁用
                        type: 1,//类型
                        checked: false,//是否必填
                        checkedDiesbled: true,//必填是否禁用
                        description: "",//备注
                        placeholder: "",
                        children: []
                    };
                    data.children.push(assign)
                } else {
                    if (type == 1 || type == 2 || type == 5) {
                        this.$set(data, "inputDisabled", false);
                        this.$set(data, "checkedDiesbled", false);
                    }
                    this.$set(data, "children", []);
                }
                node.parent.loaded = false;
                node.parent.expand();
                console.log(data, 'data');
            },
            handleCheckChange(data, select) {
            },
            rootDelete(node, data) {
                let parentNode = node.parent;
                let parentData = node.parent.data;
                if (parentNode.level === 0) { this.$message({ type: "error", message: "根元素不可以删除" }); return; }
                console.log(parentNode, parentData);
                const deleteIndex = parentData.children.findIndex((val) => val.id === data.id);
                parentData.children.splice(deleteIndex, 1);
                console.log(this.treeData, 'treeData');
                node.parent.loaded = false;
                node.parent.expand();
            },
            rootAdd(node, data) {
                console.log(data);
                let assign = {
                    id: new Date().valueOf(),
                    key: "file_id",
                    inputDisabled: false,//是否禁用
                    type: 1,//类型
                    checked: true,//是否必填
                    checkedDiesbled: false,//必填是否禁用
                    description: "",//备注
                    placeholder: "",
                    children: []
                };
                data.children.push(assign);
                node.loaded = false;
                node.expand();
            },
        },
    }
</script>
<style>
    .apiTree>>>.el-tree-node__content>>>.el-tree-node__expand-icon {
        margin-right: 10px !important;
    }
</style>
<style scoped>
    .interface-title {
        clear: both;
        font-weight: 400;
        margin: 30px 0;
        border-left: 3px solid #2395f1;
        padding-left: 8px;
    }

    .interface-content {
        padding: 15px 20px;
        box-sizing: border-box;
        background: rgba(236, 238, 241, .67);
    }

    .col-item-setting {
        padding-left: 16px;
        cursor: pointer;
    }

    .delete-item {
        padding-right: 8px;
        color: #ff561b;
    }

    .row-flex-middle {
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
    }

    .row-middle {
        /* margin-bottom: 20px; */
        width: 100%;
        margin-left: 0 !important;
    }

    .checked {
        padding: 0 9px;
        box-sizing: border-box;
    }

    .visibility {
        visibility: hidden
    }

    .apiTree {
        background: transparent;
    }

    .apiTree>>>.el-tree-node__content {
        width: 100%;
        height: auto;

        margin-bottom: 20px;
    }

    .apiTree>>>.el-col {
        padding: 0 !important;
    }
</style>