|
@@ -1,239 +1,242 @@
|
|
|
<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;" :disabled="true"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="表描述">
|
|
|
- <el-input v-model="form.tableComment" 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="isNull" label="不是null" width="100">
|
|
|
- <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> -->
|
|
|
- <el-checkbox v-model="scope.row.isNull"></el-checkbox>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
-
|
|
|
- <el-table-column prop="isPrimary" label="键" width="100">
|
|
|
- <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> -->
|
|
|
-
|
|
|
- <!-- <span v-if="scope.$index == 0"></span> -->
|
|
|
- <el-checkbox v-model="scope.row.isPrimary" @change="hanleCheckbox(scope.$index)"></el-checkbox>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
-
|
|
|
- <el-table-column prop="isAuto" label="自增" width="100">
|
|
|
- <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> -->
|
|
|
- <el-checkbox v-model="scope.row.isAuto"></el-checkbox>
|
|
|
- </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 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;" :disabled="true"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表描述">
|
|
|
+ <el-input v-model="form.tableComment" 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="isNull" label="不是null" width="100">
|
|
|
+ <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> -->
|
|
|
+ <el-checkbox v-model="scope.row.isNull"></el-checkbox>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+ <el-table-column prop="isPrimary" label="键" width="100">
|
|
|
+ <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> -->
|
|
|
+
|
|
|
+ <!-- <span v-if="scope.$index == 0"></span> -->
|
|
|
+ <el-checkbox v-model="scope.row.isPrimary" @change="hanleCheckbox(scope.$index)"></el-checkbox>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column prop="isAuto" label="自增" width="100">
|
|
|
+ <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> -->
|
|
|
+ <el-checkbox v-model="scope.row.isAuto"></el-checkbox>
|
|
|
+ </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, editTable } from '@/api/dataEngine/index'
|
|
|
+import {tableInfo, editTable} from '@/api/dataEngine/index'
|
|
|
+
|
|
|
export default {
|
|
|
- name: "Datasheet",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- form: {
|
|
|
- dataBaseName: '',
|
|
|
- tableName: '',
|
|
|
- tableComment: '',
|
|
|
- },
|
|
|
- experienceData: [],
|
|
|
- dataBase: {}
|
|
|
+ name: "Datasheet",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ dataBaseName: '',
|
|
|
+ tableName: '',
|
|
|
+ tableComment: '',
|
|
|
+ },
|
|
|
+ experienceData: [],
|
|
|
+ dataBase: {}
|
|
|
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.info()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ hanleCheckbox(ind) {
|
|
|
+ this.experienceData.forEach((item, index) => {
|
|
|
+ if (index != ind) {
|
|
|
+ item.isPrimary = false;
|
|
|
+ }
|
|
|
+ if (index == ind) {
|
|
|
+ item.isNull = true
|
|
|
}
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //增加经验行
|
|
|
+ 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);
|
|
|
},
|
|
|
- created() {
|
|
|
- this.info()
|
|
|
+ //保存经验行
|
|
|
+ handlesaveExperience(a, b) {
|
|
|
+ console.log(a + b);
|
|
|
+ console.log(b);
|
|
|
},
|
|
|
- methods: {
|
|
|
- hanleCheckbox(ind) {
|
|
|
- this.experienceData.forEach((item, index) => {
|
|
|
- if (index != ind) {
|
|
|
- item.isPrimary = false;
|
|
|
- }
|
|
|
- if (index == ind) {
|
|
|
- item.isNull = true
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
- //增加经验行
|
|
|
- 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
|
|
|
- const tableComment = this.$route.query.tableComment
|
|
|
-
|
|
|
- let data = {
|
|
|
- tableName: this.$route.query.tableName,
|
|
|
- databaseType: this.$store.state.user.dataSource.databaseType,
|
|
|
- databaseName: this.$store.state.user.dataSource.databaseName,
|
|
|
- }
|
|
|
-
|
|
|
- tableInfo(data).then(response => {
|
|
|
- console.log(response);
|
|
|
- this.experienceData = response.data
|
|
|
- this.form.tableName = tableName
|
|
|
- this.form.tableComment = tableComment
|
|
|
- });
|
|
|
- },
|
|
|
- edit() {
|
|
|
- this.experienceData.forEach((field) => {
|
|
|
- if (field.fieldLength) {
|
|
|
- field.fieldType = `${field.fieldType}(${field.fieldLength})`
|
|
|
- }
|
|
|
- })
|
|
|
- let query = {
|
|
|
- databaseType: this.$store.state.user.dataSource.databaseType,
|
|
|
- databaseName: this.$store.state.user.dataSource.databaseName,
|
|
|
- tableName: this.form.tableName,
|
|
|
- tableComment: this.form.tableComment,
|
|
|
- field: this.experienceData
|
|
|
- }
|
|
|
- editTable(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);
|
|
|
- })
|
|
|
+ //删除经验行
|
|
|
+ handleDeleteExperience(index) {
|
|
|
+ console.log(index);
|
|
|
+ this.experienceData.splice(index, 1)
|
|
|
+ },
|
|
|
+ info() {
|
|
|
+ const tableName = this.$route.query.tableName
|
|
|
+ const tableComment = this.$route.query.tableComment
|
|
|
+
|
|
|
+ let data = {
|
|
|
+ tableName: this.$route.query.tableName,
|
|
|
+ databaseType: this.$store.state.user.dataSource.databaseType,
|
|
|
+ databaseName: this.$store.state.user.dataSource.databaseName,
|
|
|
+ }
|
|
|
+
|
|
|
+ tableInfo(data).then(response => {
|
|
|
+ console.log(response);
|
|
|
+ this.experienceData = response.data
|
|
|
+ this.form.tableName = tableName
|
|
|
+ this.form.tableComment = tableComment
|
|
|
+ });
|
|
|
+ },
|
|
|
+ edit() {
|
|
|
+ this.experienceData.forEach((field) => {
|
|
|
+ if (field.fieldLength) {
|
|
|
+ field.fieldType = `${field.fieldType}(${field.fieldLength})`
|
|
|
}
|
|
|
+ })
|
|
|
+ let query = {
|
|
|
+ databaseType: this.$store.state.user.dataSource.databaseType,
|
|
|
+ databaseName: this.$store.state.user.dataSource.databaseName,
|
|
|
+ tableName: this.form.tableName,
|
|
|
+ tableComment: this.form.tableComment,
|
|
|
+ field: this.experienceData
|
|
|
+ }
|
|
|
+ editTable(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);
|
|
|
+ })
|
|
|
+ // 关闭当前页面
|
|
|
+ this.$tab.closePage();
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|