完善mysql建库建表页面

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

@@ -7,4 +7,13 @@ export function createDatabase(data) {
       data: data,
       baseURL:process.env.VUE_APP_BASE_API2
     })
+  }
+
+  export function createSqlServerDataBase(data) {
+    return request({
+      url: '/tableInfo/createSqlServerDataBase',
+      method: 'post',
+      data: data,
+      baseURL:process.env.VUE_APP_BASE_API2
+    })
   }

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

@@ -57,6 +57,15 @@
                     </template>
                 </el-table-column>
 
+                <el-table-column prop="isAuto" label="自增" width="200">
+                    <template slot-scope="scope">
+                        <el-radio-group v-show="scope.row.isPrimary" v-model="scope.row.isAuto">
+                            <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>
@@ -75,13 +84,13 @@
                 </el-table-column>
             </el-table>
             <div>
-                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddExperienceline">新增学习/工作简历
+                <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 style="margin-top: 15px;">
+            <el-button @click="add" type="primary">添加</el-button>
         </div>
     </div>
 </template>
@@ -102,7 +111,8 @@ export default {
                 fieldLength: 10,
                 isNull: false,
                 isPrimary: false,
-                fieldDescription: ''
+                fieldDescription: '',
+                isAuto:false
             },],
             dataBase: {}
 
@@ -114,7 +124,15 @@ export default {
             if (this.experienceData == undefined) {
                 this.experienceData = new Array();
             }
-            let obj = {};
+            let obj = {
+                fieldName: '',
+                fieldType: '',
+                fieldLength: 10,
+                isNull: false,
+                isPrimary: false,
+                fieldDescription: '',
+                isAuto:false
+            };
 
             this.experienceData.push(obj);
         },
@@ -129,6 +147,10 @@ export default {
             this.experienceData.splice(index, 1)
         },
         add() {
+            this.experienceData.forEach((field)=>{
+                field.fieldType = `${field.fieldType}(${field.fieldLength})`
+            })
+
             let query = {
                 dataBaseName: this.form.dataBaseName,
                 tableName: this.form.tableName,
@@ -139,19 +161,20 @@ export default {
                 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: '',
+                        isAuto:false
+                    }]
                 }
             })
-            Object.keys(this.form).forEach(key => (this.form[key] = ''));
-            this.experienceData = [{
-                fieldName: '',
-                fieldType: '',
-                fieldLength: 10,
-                isNull: false,
-                isPrimary: false,
-                fieldDescription: ''
-            }]
-        }
 
+        }
 
 
     }

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

@@ -0,0 +1,178 @@
+<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="isAuto" label="自增" width="200">
+                    <template slot-scope="scope">
+                        <el-radio-group v-show="scope.row.isPrimary" v-model="scope.row.isAuto">
+                            <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 style="margin-top: 15px;">
+            <el-button @click="addSqlServer" type="primary">添加</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { createSqlServerDataBase } from "@/api/datasheet/index"
+export default {
+    name: "SqlServer",
+    data() {
+        return {
+            form: {
+                dataBaseName: '',
+                tableName: '',
+            },
+            experienceData: [{
+                fieldName: '',
+                fieldType: '',
+                fieldLength: 10,
+                isNull: false,
+                isPrimary: false,
+                fieldDescription: '',
+                isAuto:false
+            },],
+            dataBase: {}
+
+        }
+    },
+    methods: {
+        //增加经验行
+        handleAddExperienceline() {
+            if (this.experienceData == undefined) {
+                this.experienceData = new Array();
+            }
+            let obj = {
+                fieldName: '',
+                fieldType: '',
+                fieldLength: 10,
+                isNull: false,
+                isPrimary: false,
+                fieldDescription: '',
+                isAuto:false
+            };
+
+            this.experienceData.push(obj);
+        },
+        //保存经验行
+        handlesaveExperience(a, b) {
+            console.log(a + b);
+            console.log(b);
+        },
+        //删除经验行
+        handleDeleteExperience(index) {
+            console.log(index);
+            this.experienceData.splice(index, 1)
+        },
+        addSqlServer() {
+            let query = {
+                dataBaseName: this.form.dataBaseName,
+                tableName: this.form.tableName,
+                field: this.experienceData
+            }
+            createSqlServerDataBase(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: '',
+                        isAuto:false
+                    }]
+                }
+            })
+        }
+
+
+
+    }
+}
+</script>