template
<el-form-item label="标准库表" prop="tableName">
<el-input v-model="data.tableName" style="width:300px" placeholder="请输入标准库表"></el-input>
</el-form-item>
<el-form-item label="表描述">
<el-input
style="width:100%"
v-model="data.tableComment"
placeholder="请输入表描述"
type="textarea"
/>
</el-form-item>
<el-form-item label="表字段">
<div class="transform-table" >
<div class="button-tools">
<el-button type="primary" icon="el-icon-plus" @click="addDwd">添加字段</el-button>
<el-button icon="el-icon-minus" @click="delDwd" >删除字段</el-button>
</div>
<el-table
border
:data="data.columns"
class="table2"
ref="dwdsMultipleTable"
@selection-change="handleSelectionDwdsChange"
row-key="id"
height="450"
align="left">
<el-table-column
type="selection"
width="48">
</el-table-column>
<el-table-column label="序号" fixed type="index"/>
<el-table-column
width="100px"
label="表字段">
<template slot-scope="scope">
<el-form-item :prop="'columns.' + scope.$index + '.columnName'" :rules='rules.columnName'>
<el-input v-model="scope.row.columnName" placeholder="请输入表字段"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="字段类型" prop="columnType" >
<template slot-scope="scope">
<el-form-item :prop="'columns.' + scope.$index + '.columnType'" :rules='rules.columnType'>
<el-select v-model="scope.row.columnType" clearable placeholder="请选择字段类型">
<el-option
v-for="item in columnOptions"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="字段描述" >
<template slot-scope="scope">
<el-form-item :prop="'columns.' + scope.$index + '.columnComment'" >
<el-input v-model="scope.row.columnComment" placeholder="请输入字段描述"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="是否主键" width="80" >
<template slot-scope="scope">
<el-form-item :prop="'columns.' + scope.$index + '.isPk'" >
<el-checkbox v-model="scope.row.isPk" true-label="1" false-label="0" ></el-checkbox>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="是否必填" width="80">
<template slot-scope="scope">
<el-form-item :prop="'columns.' + scope.$index + '.isRequired'" >
<el-checkbox v-model="scope.row.isRequired" true-label="1" false-label="0" ></el-checkbox>
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="mapping"
label="是否禁用" >
<template slot-scope="scope">
<el-form-item :prop="'columns.' + scope.$index + '.mapping'" >
<el-checkbox v-model="scope.row.mapping" ></el-checkbox>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="120" >
<template slot-scope="scope">
<el-form-item>
<el-button type="primary" class="move" icon="el-icon-rank"></el-button>
<el-button type="primary" icon="el-icon-minus" @click="delDwdRow(scope.row)"></el-button>
</el-form-item>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="confirm">保存</el-button>
</el-form-item>
</el-form>
script
import Sortable from 'sortablejs';
import { v4 as uuidv4 } from "uuid";
export default {
data() {
return {
dwdDisabled:false,
data:{
tableName:'',
tableComment:'',
columns:[]
},
sortable:{},
loading:false,
selectiontableData: [],
dwdSelectTable:[],
columnOptions:[
'int8',
'int2',
'int4',
'varchar(1024)',
'varchar(2048)',
'timestamptz(6)',
'date',
'numeric',
'float4',
'text',
'bytea'
],
rules:{
tableName: [
{ required: true, message: '请选请输入表名', trigger: 'blur' }
],
columnName: [{
required: true,
message: '请输入表字段',
trigger: 'blur'
}],
columnType : [{
required: true,
message: '请选择字段类型',
trigger: 'blur'
}],
},
}
},
watch: {
data: {
handler(newV, oldV) {
console.log('data',{newV, oldV})
// this.$emit("update:data", newV);
},
immediate: true,
deep: true
},
selectiontableData: {
handler(newV, oldV) {
console.log('selectiontableData',{newV, oldV})
// this.$emit("update:data", newV);
},
immediate: true,
deep: true
},
},
mounted () {
this.init()
},
methods: {
init(){
let that = this
this.$nextTick(() => {
that.rowDrop()
})
},
confirm(){
this.$refs["viewData"].validate((valid)=>{
if(valid ){
let { tableName,tableComment,tableId = null ,columns} = this.data
let params = {
tableComment,
tableName,
createTime: null,
params: {},
remark: null,
syncTime: null,
tableId,
columns
}
console.log({params})
}
})
},
handleSelectionDwdsChange(val){
this.dwdSelectTable = val
},
addDwd(){
let col = {
columnComment: "",
columnDefault: "",
columnId:null,
columnName: "",
columnType: "varchar(1024)",
createBy: "",
isRequired: '0',
isPk:'0',
params: {},
tableId: 0,
updateBy: "",
id: uuidv4(),
foreignColumnId:null,
foreignTableId:null,
dwdDisabled : false
}
if( this.data.columns){
this.$set(this.data.columns, this.data.columns.length,col)
}else{
this.data.columns = []
this.$set(this.data.columns, 0 ,col)
}
console.log( this.data.columns)
},
delDwd(){
if(this.dwdSelectTable.length>0){
let arr = [...this.data.columns].filter(x => [...this.dwdSelectTable].every(y => y.id !== x.id));
this.data.columns = arr
}
},
delDwdRow(row){
console.log(row.id ,this.data.columns)
this.data.columns = this.data.columns.filter(item=>item.id!==row.id )
},
//行拖拽
rowDrop() {
const el = this.$refs.dwdsMultipleTable.$el.querySelectorAll(
".el-table__body-wrapper > table > tbody"
)[0];
const _this = this
_this.sortable = Sortable.create(el, {
onEnd({ newIndex, oldIndex }) {
const currRow = _this.data.columns.splice(oldIndex, 1)[0]
_this.data.columns.splice(newIndex, 0, currRow)
console.log({currRow})
}
})
}
}
}
</script>
