实现数据的增删改查，并提交到后台

<template>
    <div class="layout">
        <!-- 左边列表栏 -->
        <div class="nav-box">
            <span class="nav-title">数据列表</span>
            <!-- 添加数据 -->
            <el-button class="add-btn" type="primary" icon="el-icon-plus" @click="addClick()" circle></el-button>
            <!-- 模糊查询 -->
            <el-input class="nav-inp" v-model="keyword" placeholder="请输入关键字"></el-input>
            <el-button icon="el-icon-search" @click="searchClick() " circle></el-button>
            <!-- 展示多条Chinese数据 -->
            <ul>
                <li v-for="(item,index) in this.tableData2" :key="index" @click="chooseClick(item,index) " :class="{active:index==isActive}" >
                    <span class="nav-content" v-bind:title="item.chinese">{{item.chinese}}</span>
                    <!-- 删除、清除缓存按钮 后台处理 -->
                    <el-tooltip class="item" content="删除" placement="top">
                        <el-button class="nav-btn1" @click="deleteClick(item.id)" type="text" icon="el-icon-delete"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" content="清除缓存" placement="top">
                        <el-button class="nav-btn2" @click="cacheClick(item.id)" type="text" icon="el-icon-thumb"></el-button>
                    </el-tooltip>
                </li>
            </ul>
        </div>
        <!-- 第一部分;添加数据弹窗 -->
        <el-dialog title="添加数据" :visible.sync="addDataVisible">
            <el-form :model="value">
                <span v-for="(index,key) in value" :key="key">
                    <el-form-item :label="key" :label-width="formLabelWidth">
                        <el-input v-model="value[key]" ></el-input>
                    </el-form-item>
                </span>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDataVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmData()">确 定</el-button>
            </div>
        </el-dialog>
<!-- 右边信息栏 -->
        <div class="content-box"> 
            <!--第一部分：表名为 t_common_api_config数据信息 -->
            <div class="content-title">数据信息</div> 
            <div class="panel-one" >
                <!-- name字段信息 -->
                <div class="text-wrap1" >
                    <span class="title">name</span>
                    <span class="text1" v-show="!isEdit">{{this.tableIndex.name}}</span>
                    <textarea class="editText1" v-show="isEdit" v-model="item.name"></textarea>
                </div> 
                <!-- foward_time字段信息 -->
                <div class="text-wrap2" >
                    <span class="title">foward_time</span>
                    <span class="text1" v-show="!isEdit">{{this.tableIndex.foward_time}}</span>
                    <textarea class="editText1" v-show="isEdit" v-model="item.foward_time"></textarea>
                </div> 
                <!-- fixed_time字段信息 -->
                <div class="text-wrap3" >
                    <span class="title">fixed_time</span>
                    <span class="text1" v-show="!isEdit">{{this.tableIndex.fixed_time}}</span>
                    <textarea class="editText1" v-show="isEdit" v-model="item.fixed_time"></textarea>
                </div> 
                <!-- describe字段信息 -->
                <div class="text-wrap4" >
                    <span class="title">describe</span>
                    <span class="text1" v-show="!isEdit">{{this.tableIndex.describe}}</span>
                    <textarea class="editText1" v-show="isEdit" v-model="item.describe"></textarea>
                </div> 
                <!-- creator字段信息 -->
                <div class="text-wrap5">
                    <span class="title">creator</span>
                    <span class="text1" v-show="!isEdit">{{this.tableIndex.creator}}</span>
                    <textarea class="editText1" v-show="isEdit" v-model="item.creator"></textarea>
                </div> 
                <!-- sql字段信息 -->
                <span class="panel-title">sql</span>
                <div class="text-wrapper" >
                    <span class="text2" id="sqlText" v-show="!isEdit">{{this.tableIndex.sql}}</span>
                    <textarea class="editText2" v-show="isEdit" v-model="item.sql"></textarea>
                    <div class="panel-btn">
                        <!-- 点击运行获取后台数据展示第二部分表单数据（若有参数需要用户在弹窗中输入参数来获取数据） -->
                        <el-button type="success" icon="el-icon-check"  @click="run()">运行</el-button>
                        <!-- 复制sql字段 -->
                        <el-button type="info" icon="el-icon-connection" class="tag-copy" data-clipboard-action="copy" data-clipboard-target="#sqlText" @click="copy">复制</el-button>
                        <!-- 修改第一部分数据信息 -->
                        <el-button type="primary" icon="el-icon-edit"  @click="Edit()">编辑</el-button>
                        <!-- 将修改提交到后台 -->
                        <el-button type="success" icon="el-icon-check"  @click="Save()">保存</el-button>
                    </div> 
                    <!-- 用户输入参数请求第二部分表单数据弹窗 -->
                    <el-dialog title="添加参数" :visible.sync="dialogFormVisible">
                    <el-form :model="mapValue">
                        <span v-for="(index,key) in mapValue" :key="key">
                            <el-form-item :label="key" :label-width="formLabelWidth">
                                <el-input v-model="mapValue[key]" ></el-input>
                            </el-form-item>
                        </span>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitParams(index)">确 定</el-button>
                    </div>
                    </el-dialog>
                </div>                   
            </div>
            <!--第二部分： sqlTableData表单数据 -->
            <div class="table-wrap" v-show="isSqlTableShow">
                <div class="sql-title">
                    <span class="sql-count">*运行结果共{{this.sqlLength}}条数据</span>
                    <!-- <el-button type="info" class="list-copy" data-clipboard-action="copy" :data-clipboard-text="sqlTableData" @click="copyList">复制表单数据</el-button> -->
                    <el-button type="info" class="sql-copy" data-clipboard-action="copy" :data-clipboard-text="this.sqlText" @click="copySql">复制最终Sql</el-button>
                </div>
                <el-table class="table-content" :data="sqlTableData" border>
                    <el-table-column type="index" label="序号" :index="typeIndex" align="center" width="50"/>
                    <el-table-column v-for="(item,index) in sqltableHeader" :key="index"  :show-overflow-tooltip="true" :label="item" :prop="item"></el-table-column>
                </el-table>
            </div>
            <!--第三部分： 表格params数据 -->
            <div class="table-wrap">
                <el-button class="btn" type="primary" icon="el-icon-edit"  @click="paramEdit()">编辑</el-button>
                <el-button class="btn" type="success" icon="el-icon-check" @click="paramSave()">提交</el-button>
                <!-- 文本状态下 -->
                <el-table :data="paramsData" border v-show="!paramsEdit">
                    <el-table-column type="index" label="序号" :index="typeIndex" align="center" width="50"/>
                    <el-table-column prop="name" label="name"></el-table-column>
                    <el-table-column prop="describe" label="describe"></el-table-column>
                    <el-table-column prop="type" label="type"></el-table-column>
                    <el-table-column prop="example" label="example"></el-table-column>
                </el-table>
                <!-- 编辑状态下 -->
                <el-table :data="paramsData" border v-show="paramsEdit">
                    <el-table-column type="index" label="序号" :index="typeIndex" align="center" width="50"/>
                    <el-table-column  label="name">
                        <template slot-scope="scope">
                         <el-input v-model="scope.row.name"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column  label="describe">
                        <template slot-scope="scope">
                         <el-input  v-model="scope.row.describe"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column  label="type">
                        <template slot-scope="scope">
                         <el-input v-model="scope.row.type"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column  label="example">
                        <template slot-scope="scope">
                         <el-input  v-model="scope.row.example"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column  label="操作"  width="380">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit"  @click="handleAddClick(scope.$index)">添加</el-button>
                            <el-button @click="handleDeleteClick(scope.$index)" icon="el-icon-delete" type="danger" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--第四部分： 表格result -->
            <div class="table-wrap">
                <el-button class="btn" type="primary" icon="el-icon-edit"  @click="resultEdit()">编辑</el-button>
                <el-button  class="btn" type="success" icon="el-icon-check" @click="resultsSave()">提交</el-button>
                <!-- 文本状态下 -->
                <el-table :data="resultsData" border v-show="!resultsEdit">
                    <el-table-column type="index" label="序号" :index="typeIndex" align="center" width="50"/>
                    <el-table-column prop="name" label="name"></el-table-column>
                    <el-table-column prop="describe" label="describe"></el-table-column>
                    <el-table-column prop="type" label="type"></el-table-column>
                    <el-table-column prop="example" label="example"></el-table-column>
                </el-table>
                <!-- 编辑状态下 -->
                 <el-table :data="resultsData" border v-show="resultsEdit">
                    <el-table-column type="index" label="序号" :index="typeIndex" align="center" width="50"/>
                    <el-table-column  label="name">
                        <template slot-scope="scope">
                         <el-input v-model="scope.row.name"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column  label="describe">
                        <template slot-scope="scope">
                         <el-input  v-model="scope.row.describe"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column  label="type">
                        <template slot-scope="scope">
                         <el-input v-model="scope.row.type"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column  label="example">
                        <template slot-scope="scope">
                         <el-input  v-model="scope.row.example"></el-input>
                       </template>
                    </el-table-column>
                    <el-table-column  label="操作"  width="380">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit"  @click="handleAdd(scope.$index)">添加</el-button>
                            <el-button @click="handleDelete(scope.$index)" icon="el-icon-delete" type="danger" >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
//复制文本插件
import Clipboard from 'clipboard'; 
import Api from '../table-data/api';
import api from '../index/api';
import tApi from './api';

export default {
    components: {
        Clipboard
    },
    data() {
        return {
            // 点击左侧列表加底色
            isActive: '',
            //存储[左侧数据列表里面的id一一对应第三、四部分表格里面的api_id]
            apiId:'',
            tableName:'t_common_api_config',
            pageSize:'',
            currentPage:'1',
            //第一部分数据信息
            tableData:[],
            tableData2:[],
            // 存储点击左侧列表对应某条数据信息（第一部分）
            tableIndex:[],
            editable: false,
            // 第一部分编辑与文本展示切换
            isEdit:false,
            // 第三部分编辑与文本展示切换
            paramsEdit:false,
            // 第四部分编辑与文本展示切换
            resultsEdit:false,
            tipShow:false,
            // 第二部分输入参数弹窗出现消失切换
            dialogFormVisible:false,
            // 第二部分数据表出现消失切换
            isSqlTableShow:false,
            // 第一部分添加数据弹窗出现消失切换
            addDataVisible:false,
            // 存储第一部分添加数据
            value:{
                chinese:'',
                describe:'',
                creator:'',
                fixed_time:'',
                foward_time:'',
                name:''
            },
            //存储编辑修改后的数据信息（第一部分）
            item:{
                describe:'',
                creator:'',
                fixed_time:'',
                foward_time:'',
                name:'',
                sql:''
            },
            //两个表格数据（第三、四部分）
            paramsData: [],
            resultsData:[],
            //存储两个增加表格数据（第三、四部分）
            data:[],
            result:[],
            //模糊查询
            keyword:'',
            mapValue: {},
            formLabelWidth:'120px',
            //sql查询的数据（第二部分）
            sqlTableData:[],
            sqlText:'',
            sqltableHeader:[],
            sqlLength:''
        };
    },
    computed:{
    },
    methods: {
        //第一部分增添数据显示弹窗
        addClick(){
            this.addDataVisible=true
        },
        // 第一部分提交添加数据
        async confirmData(){
            this.addDataVisible=false
            console.log(this.value)
            let res=await tApi.addData(this.value)
            console.log(res)
        },
        //点击左侧数据列表
        async chooseClick(item,i) {
            // 每次点击左侧列表清除第二部分数据缓存
            this.sqlTableData=[]
            this.sqltableHeader=[]
            this.sqlLength=''
            this.isSqlTableShow=false
            this.tableIndex=item
            // sql字段的缩进格式化
            if(this.tableIndex.sql){
                this.tableIndex.sql=this.tableIndex.sql.replaceAll("\t", "    ")
            }
            // console.log(this.tableIndex,item)
            // 获取点击对应行的序列index,加底色样式
            this.isActive = i;
            // 获取点击对应行的id，根据对应id获取第三、四部分数据
            this.apiId=item.id
            let params = await tApi.getInterfaceParams(item.id);
            this.paramsData=params.data
            let results = await tApi.getInterfaceResults(item.id);
            this.resultsData=results.data
            console.log(this.apiId)
        },
        // 模糊查询
        searchClick(){
            if (!this.keyword) {
                this.tableData2 = this.tableData
            } else {
                let newListData = []; // 用于存放搜索出来数据的新数组
                this.tableData.filter(item => {
                    if (item.chinese.indexOf(this.keyword) !== -1) {
                        newListData.push(item);
                    }
                }) 
                this.tableData2 = newListData;
                if (!newListData.length) {
                    this.tableIndex=[]
                    this.apiId = ''
                    return;
                }
            }
            // 默认展示第一条数据（第一部分）
            this.tableIndex=this.tableData2[0]
            this.apiId=this.tableIndex.id
        },
        //获取第一部分数据
        async loadData() {
            let res = await api.getTableData();
            // console.log(res.data)
            for(let key of res.data){
                if(key.tableName==this.tableName){
                    this.pageSize=key.rows;
                    if(this.pageSize>999||this.pageSize==0){
                        this.pageSize=999
                    }
                }
            }
            // console.log(this.pageSize)
            let data = await Api.getData(this.tableName,this.currentPage,100);
            this.tableData=data.data;
            this.tableData2 = data.data
            // console.log(this.tableData);
            // 默认展示第一条数据
            for(let n of this.tableData2){
                this.tableIndex=n
                this.apiId=n.id
                break
            }
            let params = await tApi.getInterfaceParams(this.apiId);
            this.paramsData=params.data

            let results = await tApi.getInterfaceResults(this.apiId);

            this.resultsData=results.data
            // console.log(this.resultsData)
        },
        // 复制第二部分sql字段内容
        copySql(){
            let clipboard = new Clipboard('.sql-copy')
            clipboard.on('success', e => {
                e.clearSelection();//清除选中样式（蓝色）
                this.$message({
                    message: '复制成功',
                    type: 'success',
                    duration:'1500'
                });
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                this.$message.error('复制失败');
                // 释放内存
                clipboard.destroy()
            })
        },
        // copyList(){
        //     let clipboard = new Clipboard('.list-copy')
        //     clipboard.on('success', e => {
        //         e.clearSelection();//清除选中样式（蓝色）
        //         this.$message({
        //             message: '复制成功',
        //             type: 'success',
        //             duration:'1500'
        //         });
        //         // 释放内存
        //         clipboard.destroy()
        //     })
        //     clipboard.on('error', e => {
        //         // 不支持复制
        //         this.$message.error('复制失败');
        //         // 释放内存
        //         clipboard.destroy()
        //     })
        // },
        //删除数据列表指定行数据
        async deleteClick(){
            console.log(index)
        },
        //左侧清除列表缓存
        async cacheClick(index){
            const cacheData= await tApi.clearCache(this.name)
            // console.log(this.name)
            if(cacheData.msg=="success"){
                this.$message({
                    message: '清除缓存成功',
                    type: 'success',
                    duration:'1500'
                });
            }
        },
        //复制第一部分sql字段
         copy() {
            let clipboard = new Clipboard('.tag-copy')
            clipboard.on('success', e => {
                e.clearSelection();//清除选中样式（蓝色）
                this.$message({
                    message: '复制成功',
                    type: 'success',
                    duration:'1500'
                });
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                 this.$message.error('复制失败');
                // 释放内存
                clipboard.destroy()
            })
        },
        //第三部分params表格添加数据
        handleAddClick(index,apiId){
            this.data={
                // api_id:apiId,
                name:'',
                describe:'',
                type:'',
                example:'',
            }
            this.paramsData.splice(index+1,0,this.data)
        },
        //第三部分params表格删除数据
        handleDeleteClick(index) {
            this.$confirm('是否删除该行数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.paramsData.splice(index,1)
                this.$message({showClose: true, message: "删除成功", type: 'success'});
            })
        },
        //第四部分result表格添加数据
        handleAdd(index,apiId){
            this.result={
                // api_id:apiId,
                name:'',
                describe:'',
                type:'',
                example:'',
            }
            this.resultsData.splice(index+1,0,this.result)
        },
        //第四部分result表格删除数据
        handleDelete(index) {
            this.$confirm('是否删除该行数据？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.resultsData.splice(index,1)
                this.$message({showClose: true, message: "删除成功", type: 'success'});
            })
        },
        //第三部分param表格编辑
        paramEdit(){
            if(this.paramsData.length==0){
                this.paramsData.push({
                    // api_id:'',
                    name:'',
                    describe:'',
                    type:'',
                    example:'',
                })
            }
            this.paramsEdit=true
        },
        //第三部分param表格提交
        async paramSave(){
            this.paramsEdit=false
            const res = await tApi.commitInterfacePramas(this.apiId,this.paramsData);
            console.log(res)
        },
        //第四部分result表格编辑
        resultEdit(){
            if(this.resultsData.length==0){
                this.resultsData.push({
                    // api_id:'',
                    name:'',
                    describe:'',
                    type:'',
                    example:'',
                })
            }
            this.resultsEdit=true
        },
         //第四部分result表格提交
        async resultsSave(){
            this.resultsEdit=false
            const res= await tApi.commitInterfaceResults(this.apiId,this.resultsData)
            console.log(res)
        },
        //对sql进行正则匹配，提取“params.”后面参数名
        extractSql() {
            let reg = /.params.([_a-zA-Z0-9]+)|"params.([_a-zA-Z0-9]+)/g
            let map = {}
            while (true) {
                let arr = reg.exec(this.item.sql)
                if (!arr) {
                    break;
                }
                map[(arr[1] ? arr[1] : arr[2])] = ''
            }
            return map;
        },
        // 获取第二部分表单数据
        run(){
            // 每次点击都清除上次数据缓存
            this.sqlTableData=[]
            this.sqltableHeader=[]
            this.sqlLength=''
            this.isEdit=false
            this.item=this.tableIndex
            this.mapValue=this.extractSql()
            // 如果sql字段“params.”后面有参数名，则弹窗让用户输入参数后获取对应数据，否则直接获取对应数据
            if(JSON.stringify(this.mapValue)!='{}'){
                this.isSqlTableShow=false
                this.dialogFormVisible=true
            }else{
                this.submitParams()
            }
            console.log(this.mapValue)
        },
        // 获取第二部分对应的表单数据
        async submitParams(){
            this.dialogFormVisible = false
            this.isSqlTableShow=true
            // console.log(this.mapValue,this.item)
            //整数
            let regInt=/^\d+$/
            //浮点数
            let regFloat=/^(-?\d+)(\.\d+)?$/;
            // 判断是否存在"[]""{}"
            let regex=/\[|\]|{|}/g
            for(let key in this.mapValue){
                let item=this.mapValue[key]
                if(regInt.test(item)){
                    this.mapValue[key]=parseInt(item)
                } else if(regFloat.test(item)){
                    this.mapValue[key]=parseFloat(item)
                } else if(regex.test(item)){
                    this.mapValue[key]=JSON.parse(item)
                }
            }
            //将两个对象合并成一个对象
            let runSql=Object.assign({},this.mapValue,this.item)
            // console.log(runSql)
            let res= await tApi.commitSql(runSql)
            // console.log(res)
            this.sqlText=res.sql
            this.sqlTableData=res.data
            // console.log(this.sqlTableData)
            // 若没有获取到数据，则提示
            if(typeof(this.sqlTableData)=="undefined"){
                this.isSqlTableShow=false
                this.$message({
                    message: '未查询到数据',
                    type: 'error',
                    duration:'1500'
                });
            }else{
                this.sqlLength=this.sqlTableData.length
                // 获取第二部分表单表头名称
                for(let key in this.sqlTableData[0]){
                    this.sqltableHeader.push(key)
                }
                console.log(this.sqltableHeader)
            }
            
         },
        //第四部分tableData数据编辑
        Edit(){
            this.isEdit=true
            this.item=this.tableIndex
        },
        //第四部分修改tableData数据
        async Save(){
            this.isEdit=false
            this.tableIndex=this.item
            const res= await tApi.commitData(this.tableIndex)
            console.log(res)
        }
    },
    mounted() {
        this.loadData();
    }
}
</script>

<style lang="less" scoped>
</style>

直接上代码

数据接口

export default {
    //获取paramssTable数据
    getInterfaceParams(options) {
        return new Promise( resolve => {
            Request.get({
                url: ``,
            }).then( rsp => {
                resolve( rsp );
            });
        });
    },
    //获取resultsTable数据
    getInterfaceResults(options) {
        return new Promise( resolve => {
            Request.get({
                url: ``,
            }).then( rsp => {
                resolve( rsp );
            });
        });
    },
    //数据信息传递数据
    commitData(data) {
        return Request.put({
          url: `/interface/`,
          contentType: "json",
          data:data
        });
    },
    //paramsTable传递数据
    commitInterfacePramas(options,data) {
        return Request.post({
          url: ``,
          contentType: "json",
          data:data
        });
    },
    //resultsTable传递数据
    commitInterfaceResults(options,data) {
        return Request.post({
          url: ``,
          contentType: "json",
          data:data
        });
    }
}

展示：第二部分是点击“运行”按钮展示，默认不展示（若需要填入参数则会弹出弹窗，输入正确参数后获取对应的第二部分表单数据）。

 点击左侧上方蓝色添加按钮：

点击“编辑”按钮：