|
|
@@ -0,0 +1,180 @@
|
|
|
+<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="edit" type="primary">修改</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { tableInfo,editMysqlTable } from '@/api/dataEngine/index'
|
|
|
+export default {
|
|
|
+ name: "Datasheet",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ dataBaseName: '',
|
|
|
+ tableName: '',
|
|
|
+ },
|
|
|
+ experienceData: [],
|
|
|
+ dataBase: {}
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.info()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //增加经验行
|
|
|
+ handleAddExperienceline() {
|
|
|
+ if (this.experienceData == undefined) {
|
|
|
+ this.experienceData = new Array();
|
|
|
+ }
|
|
|
+ let obj = {
|
|
|
+ fieldName: '',
|
|
|
+ fieldType: '',
|
|
|
+ fieldLength: undefined,
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ info() {
|
|
|
+ const tableName = this.$route.query.tableName
|
|
|
+ console.log(tableName);
|
|
|
+ tableInfo(tableName).then(response => {
|
|
|
+ console.log(response);
|
|
|
+ this.experienceData = response.data
|
|
|
+ this.form.tableName = tableName
|
|
|
+ });
|
|
|
+ },
|
|
|
+ edit() {
|
|
|
+ this.experienceData.forEach((field) => {
|
|
|
+ if (field.fieldLength) {
|
|
|
+ field.fieldType = `${field.fieldType}(${field.fieldLength})`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let query = {
|
|
|
+ tableName: this.form.tableName,
|
|
|
+ field: this.experienceData
|
|
|
+ }
|
|
|
+ editMysqlTable(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 = []
|
|
|
+
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
xuezizhuo