创建数据库表页面

ruoyi-ui/.env.development

@@ -9,3 +9,5 @@ VUE_APP_BASE_API = '/dev-api'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+VUE_APP_BASE_API2 = 'http://localhost:8081/'

ruoyi-ui/src/api/datasheet/index.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+export function createDatabase(data) {
+    return request({
+      url: '/tableInfo/createDatabase',
+      method: 'post',
+      data: data,
+      baseURL:process.env.VUE_APP_BASE_API2
+    })
+  }

ruoyi-ui/src/views/tool/datasheet/index.vue

@@ -0,0 +1,159 @@
+<template>
+    <div class="app-container">
+        <el-card style="margin-bottom: 15px;">
+            <el-form ref="form" :model="form" label-width="100px">
+                <el-form-item label="数据库名称">
+                    <el-input v-model="form.dataBaseName" style="width: 600px;"></el-input>
+                </el-form-item>
+                <el-form-item label="数据表名称">
+                    <el-input v-model="form.tableName" style="width: 600px;"></el-input>
+                </el-form-item>
+            </el-form>
+        </el-card>
+        <el-card>
+            <div class="titleitem">
+                <span>数据表字段</span>
+            </div>
+            <el-table :data="experienceData" stripe style="width: 100%">
+                <el-table-column prop="fieldName" label="字段名称" width="200">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.fieldName"></el-input>
+                    </template>
+                </el-table-column>
+
+                <el-table-column prop="fieldType" label="字段类型" width="200">
+                    <template slot-scope="scope">
+                        <el-select v-model="scope.row.fieldType">
+                            <el-option label="int" value="int"></el-option>
+                            <el-option label="varchar" value="varchar"></el-option>
+                        </el-select>
+                    </template>
+
+                </el-table-column>
+
+                <el-table-column prop="fieldLength" label="长度" width="200">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.fieldLength"></el-input>
+                    </template>
+                </el-table-column>
+
+                <el-table-column prop="isNull" label="不是null" width="200">
+                    <template slot-scope="scope">
+                        <el-radio-group v-model="scope.row.isNull">
+                            <el-radio :label="true">是</el-radio>
+                            <el-radio :label="false">否</el-radio>
+                        </el-radio-group>
+                    </template>
+                </el-table-column>
+
+
+
+                <el-table-column prop="isPrimary" label="键" width="200">
+                    <template slot-scope="scope">
+                        <el-radio-group v-model="scope.row.isPrimary">
+                            <el-radio :label="true">是</el-radio>
+                            <el-radio :label="false">否</el-radio>
+                        </el-radio-group>
+                    </template>
+                </el-table-column>
+
+                <el-table-column prop="fieldDescription" label="字段描述" width="200">
+                    <template slot-scope="scope">
+                        <el-input v-model="scope.row.fieldDescription"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="operate" label="操作">
+                    <template slot-scope="scope">
+                        <el-button size="mini" type="success" icon="el-icon-save"
+                            @click="handlesaveExperience(scope.$index, scope.row)">保存
+                        </el-button>
+                        <el-button size="mini" type="danger" icon="el-icon-delete"
+                            @click="handleDeleteExperience(scope.$index, scope.row)">删除
+                        </el-button>
+
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div>
+                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddExperienceline">新增学习/工作简历
+                </el-button>
+            </div>
+        </el-card>
+
+        <div>
+            <el-button @click="add" type="success">提交</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { createDatabase } from "@/api/datasheet/index"
+export default {
+    name: "Datasheet",
+    data() {
+        return {
+            form: {
+                dataBaseName: '',
+                tableName: '',
+            },
+            experienceData: [{
+                fieldName: '',
+                fieldType: '',
+                fieldLength: 10,
+                isNull: false,
+                isPrimary: false,
+                fieldDescription: ''
+            },],
+            dataBase: {}
+
+        }
+    },
+    methods: {
+        //增加经验行
+        handleAddExperienceline() {
+            if (this.experienceData == undefined) {
+                this.experienceData = new Array();
+            }
+            let obj = {};
+
+            this.experienceData.push(obj);
+        },
+        //保存经验行
+        handlesaveExperience(a, b) {
+            console.log(a + b);
+            console.log(b);
+        },
+        //删除经验行
+        handleDeleteExperience(index) {
+            console.log(index);
+            this.experienceData.splice(index, 1)
+        },
+        add() {
+            let query = {
+                dataBaseName: this.form.dataBaseName,
+                tableName: this.form.tableName,
+                field: this.experienceData
+            }
+            createDatabase(query).then(res => {
+                this.$modal.msgSuccess(res.msg);
+                if (res.code === 200) {
+                    this.visible = false;
+                    this.$emit("ok");
+                }
+            })
+            Object.keys(this.form).forEach(key => (this.form[key] = ''));
+            this.experienceData = [{
+                fieldName: '',
+                fieldType: '',
+                fieldLength: 10,
+                isNull: false,
+                isPrimary: false,
+                fieldDescription: ''
+            }]
+        }
+
+
+
+    }
+}
+</script>