|
|
@ -1,45 +1,78 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<a-modal title="编辑数据列" :width="900" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit"
|
|
|
|
<a-modal
|
|
|
|
@cancel="handleCancel">
|
|
|
|
title="编辑数据列"
|
|
|
|
|
|
|
|
:width="900"
|
|
|
|
|
|
|
|
:visible="visible"
|
|
|
|
|
|
|
|
:confirmLoading="confirmLoading"
|
|
|
|
|
|
|
|
@ok="handleSubmit"
|
|
|
|
|
|
|
|
@cancel="handleCancel"
|
|
|
|
|
|
|
|
>
|
|
|
|
<a-spin :spinning="confirmLoading">
|
|
|
|
<a-spin :spinning="confirmLoading">
|
|
|
|
<a-divider orientation="left">数据列信息</a-divider>
|
|
|
|
<a-divider orientation="left">数据列信息</a-divider>
|
|
|
|
<a-form :form="form">
|
|
|
|
<a-form :form="form">
|
|
|
|
<a-form-item label="列名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-form-item label="列名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-input placeholder="请输入列名" v-decorator="['dbColumnName', { rules: [{ required: true, message: '请输入列名!' }] }]" />
|
|
|
|
<a-input
|
|
|
|
|
|
|
|
placeholder="请输入列名"
|
|
|
|
|
|
|
|
v-decorator="['dbColumnName', { rules: [{ required: true, message: '请输入列名!' }] }]"
|
|
|
|
|
|
|
|
/>
|
|
|
|
</a-form-item>
|
|
|
|
</a-form-item>
|
|
|
|
<a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-input placeholder="请输入描述" style="width: 100%"
|
|
|
|
<a-input placeholder="请输入描述" style="width: 100%" v-decorator="['columnDescription']" />
|
|
|
|
v-decorator="['columnDescription', { rules: [{ required: true, message: '请输入描述!' }] }]" />
|
|
|
|
|
|
|
|
</a-form-item>
|
|
|
|
</a-form-item>
|
|
|
|
<a-form-item label="主键" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-form-item label="主键" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-select v-decorator="['isPrimarykey', { rules: [{ required: true, message: '请选择是否为主键' }] }]"
|
|
|
|
<a-select
|
|
|
|
key="isPrimarykey" style="width: 100%" placeholder="请选择" has-feedback
|
|
|
|
v-decorator="['isPrimarykey', { rules: [{ required: true, message: '请选择是否为主键' }] }]"
|
|
|
|
@change="e => primarykeyHandleChange(e)">
|
|
|
|
key="isPrimarykey"
|
|
|
|
<a-select-option v-for="(item, index) in selectData" :key="index" :value="item.value">{{ item.text }}
|
|
|
|
style="width: 100%"
|
|
|
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
|
|
|
has-feedback
|
|
|
|
|
|
|
|
@change="e => primarykeyHandleChange(e)"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<a-select-option v-for="(item, index) in selectData" :key="index" :value="item.value"
|
|
|
|
|
|
|
|
>{{ item.text }}
|
|
|
|
</a-select-option>
|
|
|
|
</a-select-option>
|
|
|
|
</a-select>
|
|
|
|
</a-select>
|
|
|
|
</a-form-item>
|
|
|
|
</a-form-item>
|
|
|
|
<a-form-item label="自增" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-form-item label="自增" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-select :disabled="enabledIsIdentity"
|
|
|
|
<a-select
|
|
|
|
v-decorator="['isIdentity', { rules: [{ required: true, message: '请选择是否自增' }] }]" key="isIdentity"
|
|
|
|
:disabled="enabledIsIdentity"
|
|
|
|
style="width: 100%" placeholder="请选择" has-feedback>
|
|
|
|
v-decorator="['isIdentity', { rules: [{ required: true, message: '请选择是否自增' }] }]"
|
|
|
|
<a-select-option v-for="(item, index) in selectData" :key="index" :value="item.value">{{ item.text }}
|
|
|
|
key="isIdentity"
|
|
|
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
|
|
|
has-feedback
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<a-select-option v-for="(item, index) in selectData" :key="index" :value="item.value"
|
|
|
|
|
|
|
|
>{{ item.text }}
|
|
|
|
</a-select-option>
|
|
|
|
</a-select-option>
|
|
|
|
</a-select>
|
|
|
|
</a-select>
|
|
|
|
</a-form-item>
|
|
|
|
</a-form-item>
|
|
|
|
<a-form-item label="可空" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-form-item label="可空" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-select :disabled="enabledIsNullabled"
|
|
|
|
<a-select
|
|
|
|
v-decorator="['isNullable', { rules: [{ required: true, message: '请选择是否可空' }] }]" key="isNullable"
|
|
|
|
:disabled="enabledIsNullabled"
|
|
|
|
style="width: 100%" placeholder="请选择" has-feedback>
|
|
|
|
v-decorator="['isNullable', { rules: [{ required: true, message: '请选择是否可空' }] }]"
|
|
|
|
<a-select-option v-for="(item, index) in selectData" :key="index" :value="item.value">{{ item.text }}
|
|
|
|
key="isNullable"
|
|
|
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
|
|
|
has-feedback
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<a-select-option v-for="(item, index) in selectData" :key="index" :value="item.value"
|
|
|
|
|
|
|
|
>{{ item.text }}
|
|
|
|
</a-select-option>
|
|
|
|
</a-select-option>
|
|
|
|
</a-select>
|
|
|
|
</a-select>
|
|
|
|
</a-form-item>
|
|
|
|
</a-form-item>
|
|
|
|
<a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-select v-decorator="['dataType', { rules: [{ required: true, message: '请选择类型' }] }]" key="dataType"
|
|
|
|
<a-select
|
|
|
|
style="width: 100%" placeholder="请选择" has-feedback @change="e => dataTypeHandleChange(e)">
|
|
|
|
v-decorator="['dataType', { rules: [{ required: true, message: '请选择类型' }] }]"
|
|
|
|
|
|
|
|
key="dataType"
|
|
|
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
|
|
|
has-feedback
|
|
|
|
|
|
|
|
@change="e => dataTypeHandleChange(e)"
|
|
|
|
|
|
|
|
>
|
|
|
|
<a-select-option v-for="(item, index) in dataTypeSelectData" :key="index" :value="item.value">
|
|
|
|
<a-select-option v-for="(item, index) in dataTypeSelectData" :key="index" :value="item.value">
|
|
|
|
{{ item.value }}</a-select-option>
|
|
|
|
{{ item.value }}</a-select-option
|
|
|
|
|
|
|
|
>
|
|
|
|
</a-select>
|
|
|
|
</a-select>
|
|
|
|
</a-form-item>
|
|
|
|
</a-form-item>
|
|
|
|
<a-form-item label="长度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
|
<a-form-item label="长度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
|
|
|
@ -54,9 +87,7 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import {
|
|
|
|
import { columnAdd } from '@/api/modular/gen/databaseManage'
|
|
|
|
columnAdd
|
|
|
|
|
|
|
|
} from '@/api/modular/gen/databaseManage'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
@ -79,69 +110,83 @@ export default {
|
|
|
|
visible: false,
|
|
|
|
visible: false,
|
|
|
|
confirmLoading: false,
|
|
|
|
confirmLoading: false,
|
|
|
|
form: this.$form.createForm(this),
|
|
|
|
form: this.$form.createForm(this),
|
|
|
|
dataTypeSelectData: [{
|
|
|
|
dataTypeSelectData: [
|
|
|
|
value: 'text',
|
|
|
|
{
|
|
|
|
hasLength: false,
|
|
|
|
value: 'text',
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasLength: false,
|
|
|
|
},
|
|
|
|
hasDecimalDigits: false
|
|
|
|
{
|
|
|
|
},
|
|
|
|
value: 'varchar',
|
|
|
|
{
|
|
|
|
hasLength: true,
|
|
|
|
value: 'varchar',
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasLength: true,
|
|
|
|
}, {
|
|
|
|
hasDecimalDigits: false
|
|
|
|
value: 'nvarchar',
|
|
|
|
},
|
|
|
|
hasLength: true,
|
|
|
|
{
|
|
|
|
hasDecimalDigits: false
|
|
|
|
value: 'nvarchar',
|
|
|
|
},
|
|
|
|
hasLength: true,
|
|
|
|
{
|
|
|
|
hasDecimalDigits: false
|
|
|
|
value: 'char',
|
|
|
|
},
|
|
|
|
hasLength: true,
|
|
|
|
{
|
|
|
|
hasDecimalDigits: false
|
|
|
|
value: 'char',
|
|
|
|
}, {
|
|
|
|
hasLength: true,
|
|
|
|
value: 'nchar',
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasLength: true,
|
|
|
|
},
|
|
|
|
hasDecimalDigits: false
|
|
|
|
{
|
|
|
|
}, {
|
|
|
|
value: 'nchar',
|
|
|
|
value: 'timestamp',
|
|
|
|
hasLength: true,
|
|
|
|
hasLength: false,
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasDecimalDigits: false
|
|
|
|
},
|
|
|
|
}, {
|
|
|
|
{
|
|
|
|
value: 'int',
|
|
|
|
value: 'timestamp',
|
|
|
|
hasLength: false,
|
|
|
|
hasLength: false,
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasDecimalDigits: false
|
|
|
|
}, {
|
|
|
|
},
|
|
|
|
value: 'smallint',
|
|
|
|
{
|
|
|
|
hasLength: false,
|
|
|
|
value: 'int',
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasLength: false,
|
|
|
|
}, {
|
|
|
|
hasDecimalDigits: false
|
|
|
|
value: 'tinyint',
|
|
|
|
},
|
|
|
|
hasLength: false,
|
|
|
|
{
|
|
|
|
hasDecimalDigits: false
|
|
|
|
value: 'smallint',
|
|
|
|
}, {
|
|
|
|
hasLength: false,
|
|
|
|
value: 'bigint',
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasLength: false,
|
|
|
|
},
|
|
|
|
hasDecimalDigits: false
|
|
|
|
{
|
|
|
|
}, {
|
|
|
|
value: 'tinyint',
|
|
|
|
value: 'bit',
|
|
|
|
hasLength: false,
|
|
|
|
hasLength: false,
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasDecimalDigits: false
|
|
|
|
},
|
|
|
|
}, {
|
|
|
|
{
|
|
|
|
value: 'decimal',
|
|
|
|
value: 'bigint',
|
|
|
|
hasLength: true,
|
|
|
|
hasLength: false,
|
|
|
|
hasDecimalDigits: true
|
|
|
|
hasDecimalDigits: false
|
|
|
|
}, {
|
|
|
|
},
|
|
|
|
value: 'datetime',
|
|
|
|
{
|
|
|
|
hasLength: false,
|
|
|
|
value: 'bit',
|
|
|
|
hasDecimalDigits: false
|
|
|
|
hasLength: false,
|
|
|
|
},
|
|
|
|
hasDecimalDigits: false
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
value: 'decimal',
|
|
|
|
|
|
|
|
hasLength: true,
|
|
|
|
|
|
|
|
hasDecimalDigits: true
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
value: 'datetime',
|
|
|
|
|
|
|
|
hasLength: false,
|
|
|
|
|
|
|
|
hasDecimalDigits: false
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
selectData: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
text: '是',
|
|
|
|
|
|
|
|
value: 1
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
text: '否',
|
|
|
|
|
|
|
|
value: 0
|
|
|
|
|
|
|
|
}
|
|
|
|
],
|
|
|
|
],
|
|
|
|
selectData: [{
|
|
|
|
|
|
|
|
text: '是',
|
|
|
|
|
|
|
|
value: 1
|
|
|
|
|
|
|
|
}, {
|
|
|
|
|
|
|
|
text: '否',
|
|
|
|
|
|
|
|
value: 0
|
|
|
|
|
|
|
|
}],
|
|
|
|
|
|
|
|
hasLength: true,
|
|
|
|
hasLength: true,
|
|
|
|
hasDecimalDigits: true,
|
|
|
|
hasDecimalDigits: true,
|
|
|
|
enabledIsNullabled: false,
|
|
|
|
enabledIsNullabled: false,
|
|
|
@ -149,85 +194,85 @@ export default {
|
|
|
|
tableName: '',
|
|
|
|
tableName: '',
|
|
|
|
validateLengthRule: {
|
|
|
|
validateLengthRule: {
|
|
|
|
rules: [
|
|
|
|
rules: [
|
|
|
|
{required: this.lengthIsRequire, message: '请输入字段长度'},
|
|
|
|
{ required: this.lengthIsRequire, message: '请输入字段长度' },
|
|
|
|
{
|
|
|
|
{
|
|
|
|
validator: (rule, value, cbfn) => {
|
|
|
|
validator: (rule, value, cbfn) => {
|
|
|
|
const form = this.form;
|
|
|
|
const form = this.form
|
|
|
|
let dataType = form.getFieldValue('dataType');
|
|
|
|
let dataType = form.getFieldValue('dataType')
|
|
|
|
if((dataType=='varchar' || dataType =='nvarchar') && !value){
|
|
|
|
if ((dataType == 'varchar' || dataType == 'nvarchar') && !value) {
|
|
|
|
cbfn('请输入长度');
|
|
|
|
cbfn('请输入长度')
|
|
|
|
return false;
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if ((dataType=="varchar" || dataType=="nvarchar") && value<=0) {
|
|
|
|
if ((dataType == 'varchar' || dataType == 'nvarchar') && value <= 0) {
|
|
|
|
cbfn('长度不能小于0')
|
|
|
|
cbfn('长度不能小于0')
|
|
|
|
}
|
|
|
|
}
|
|
|
|
cbfn()
|
|
|
|
cbfn()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
]
|
|
|
|
]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
dataTypeHandleChange(value) {
|
|
|
|
dataTypeHandleChange(value) {
|
|
|
|
let type = this.dataTypeSelectData.find(item => item.value == value);
|
|
|
|
let type = this.dataTypeSelectData.find(item => item.value == value)
|
|
|
|
if (type) {
|
|
|
|
if (type) {
|
|
|
|
this.hasLength = type.hasLength
|
|
|
|
this.hasLength = type.hasLength
|
|
|
|
this.hasDecimalDigits = type.hasDecimalDigits
|
|
|
|
this.hasDecimalDigits = type.hasDecimalDigits
|
|
|
|
if (!this.hasLength) {
|
|
|
|
if (!this.hasLength) {
|
|
|
|
this.form.setFieldsValue({
|
|
|
|
this.form.setFieldsValue({
|
|
|
|
length: 0
|
|
|
|
length: 0
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (!this.hasDecimalDigits) {
|
|
|
|
if (!this.hasDecimalDigits) {
|
|
|
|
this.form.setFieldsValue({
|
|
|
|
this.form.setFieldsValue({
|
|
|
|
decimalDigits: 0
|
|
|
|
decimalDigits: 0
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
primarykeyHandleChange(value) {
|
|
|
|
primarykeyHandleChange(value) {
|
|
|
|
if (value == 1) {
|
|
|
|
if (value == 1) {
|
|
|
|
this.enabledIsNullabled = true;
|
|
|
|
this.enabledIsNullabled = true
|
|
|
|
this.enabledIsIdentity = false;
|
|
|
|
this.enabledIsIdentity = false
|
|
|
|
this.form.setFieldsValue({
|
|
|
|
this.form.setFieldsValue({
|
|
|
|
isNullable: 0
|
|
|
|
isNullable: 0
|
|
|
|
});
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.enabledIsNullabled = false;
|
|
|
|
this.enabledIsNullabled = false
|
|
|
|
this.enabledIsIdentity = true;
|
|
|
|
this.enabledIsIdentity = true
|
|
|
|
this.form.setFieldsValue({
|
|
|
|
this.form.setFieldsValue({
|
|
|
|
isIdentity: 0
|
|
|
|
isIdentity: 0
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 初始化方法
|
|
|
|
// 初始化方法
|
|
|
|
add(tableName) {
|
|
|
|
add(tableName) {
|
|
|
|
this.tableName = tableName;
|
|
|
|
this.tableName = tableName
|
|
|
|
this.visible = true
|
|
|
|
this.visible = true
|
|
|
|
},
|
|
|
|
},
|
|
|
|
handleSubmit() {
|
|
|
|
handleSubmit() {
|
|
|
|
const {
|
|
|
|
const {
|
|
|
|
form: {
|
|
|
|
form: { validateFields }
|
|
|
|
validateFields
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
} = this
|
|
|
|
} = this
|
|
|
|
this.confirmLoading = true
|
|
|
|
this.confirmLoading = true
|
|
|
|
validateFields((errors, values) => {
|
|
|
|
validateFields((errors, values) => {
|
|
|
|
if (!errors) {
|
|
|
|
if (!errors) {
|
|
|
|
values["tableName"] = this.tableName;
|
|
|
|
values['tableName'] = this.tableName
|
|
|
|
columnAdd(values).then((res) => {
|
|
|
|
columnAdd(values)
|
|
|
|
if (res.success) {
|
|
|
|
.then(res => {
|
|
|
|
this.$message.success('新增成功')
|
|
|
|
if (res.success) {
|
|
|
|
|
|
|
|
this.$message.success('新增成功')
|
|
|
|
|
|
|
|
this.confirmLoading = false
|
|
|
|
|
|
|
|
this.$emit('ok', values)
|
|
|
|
|
|
|
|
this.handleCancel()
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.$message.error('新增失败') // + res.message
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.finally(res => {
|
|
|
|
this.confirmLoading = false
|
|
|
|
this.confirmLoading = false
|
|
|
|
this.$emit('ok', values)
|
|
|
|
})
|
|
|
|
this.handleCancel()
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
this.$message.error('新增失败') // + res.message
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}).finally((res) => {
|
|
|
|
|
|
|
|
this.confirmLoading = false
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
this.confirmLoading = false
|
|
|
|
this.confirmLoading = false
|
|
|
|
}
|
|
|
|
}
|
|
|
|