console
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by dchcrzm</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css">
</head>
<body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.10/lib/index.js"></script>
<div id="app">
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="150px">
<el-form-item
v-for="(item,index) in dynamicValidateForm.mappings"
:key="item.mid"
:label="item.mname"
:prop="'mappings.' + index + '.value'"
>
<el-select v-model="item.oid" style="width: 50%">
<el-option
v-for="oracle in oracles"
:key="oracle.oid"
:value="oracle.oid"
:label="oracle.oname"
/>
</el-select>
</el-form-item>
<el-form-item
v-for="(item,index) in dynamicValidateForm.newMappings"
:key="item.mid"
:label="item.mname"
:prop="'newMappings.' + index + '.value'"
>
<el-select v-model="item.oid" style="width: 50%">
<el-option
v-for="oracle in oracles"
:key="oracle.oid"
:value="oracle.oid"
:label="oracle.oname"
/>
</el-select>
<el-button type="danger" @click.prevent="removeMapping(item)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="dialogVisible=true">新增映射</el-button>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">保存</el-button>
<el-button type="primary" @click="showMapping">显示数据</el-button>
<el-button type="danger" @click="defaultSet">恢复默认</el-button>
<el-button type="danger" @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
<el-dialog
title="新增映射"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<el-form ref="addMappingForm" :model="addMappingForm" label-width="150px">
<el-form-item label="MYSQL字段类型">
<el-input v-model="addMappingForm.mname" ></el-input>
</el-form-item>
<el-form-item label="ORACLE字段类型">
<el-select
v-model="addMappingForm.oid"
style="width: 100%;"
placeholder="请选择..">
<el-option
v-for="oracle in oracles"
:key="oracle.oid"
:value="oracle.oid"
:label="oracle.oname"
/>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="addMapping" >确 定</el-button>
<el-button @click="dialogVisible = false" >取 消</el-button>
</span>
</el-dialog>
</div>
<script>
const vm = new Vue({
el:"#app",
created(){
this.dynamicValidateForm.mappings = this.mappings
},
methods: {
showMapping(){
this.$message({
message: this.dynamicValidateForm,
type: 'success'
});
},
uuid() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4";
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
},
removeMapping(item) {
var index = this.dynamicValidateForm.newMappings.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.newMappings.splice(index, 1)
}
},
addMapping() {
this.dialogVisible = false
this.addMappingForm.id = this.uuid()
console.log(this.uuid())
this.dynamicValidateForm.newMappings.push(
this.addMappingForm
);
this.addMappingForm = {id: null,mname:null,oid:null}
},
defaultSet() {
this.dynamicValidateForm.newMappings = []
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
},
data() {
return {
dialogVisible: false,
dynamicValidateForm: {mappings: [],newMappings:[]},
addMappingForm:{id: null,mname:null,oid:null},
mappings:[
{'mid':'6651cd53-5884-4931-ace8-4628d2a2a525','mname': 'DATE', 'oid':'6651cd53-5884-4931-ace8-4628d2a2a525'},
{'mid':'73a413d8-7e7e-447b-b57e-a91ea23a523d','mname': 'LONGBLOB', 'oid':'86bcead6-992f-4528-b67b-78f8cceeb080'},
{'mid':'797ab047-8b7b-43bf-989e-ea3a5ed5c88a','mname': 'INT', 'oid':'73a413d8-7e7e-447b-b57e-a91ea23a523d'},
{'mid':'86bcead6-992f-4528-b67b-78f8cceeb080','mname': 'TEXT', 'oid':'6651cd53-5884-4931-ace8-4628d2a2a525'},
{'mid':'5b3ec3b8-d4cd-48de-b40e-06a9fd0dd780','mname': 'CHAR', 'oid':'6651cd53-5884-4931-ace8-4628d2a2a525'},
{'mid':'fb6d4639-2556-409f-b2ad-7a1b0362631e','mname': 'DECIMAL', 'oid':'6651cd53-5884-4931-ace8-4628d2a2a525'},
{'mid':'f6be9040-1bfc-4207-8121-8ce9bd30439c','mname': 'DATETIME', 'oid':'6651cd53-5884-4931-ace8-4628d2a2a525'},
{'mid':'cf8583b4-ec77-42d5-afe3-ac4995d92ff3','mname': 'VARCHAR', 'oid':'6651cd53-5884-4931-ace8-4628d2a2a525'},
{'mid':'fab981f3-5cfb-4c07-a212-e530b6541a39','mname': 'LONGTEXT', 'oid':'6651cd53-5884-4931-ace8-4628d2a2a525'},
{'mid':'86fdc1e6-1866-47c7-a325-329636b96944','mname': 'BIGINT', 'oid':'73a413d8-7e7e-447b-b57e-a91ea23a523d'},
{'mid':'3b12ba1f-6cca-4188-9ef9-2531bb947694','mname': 'MEDIUMTEXT', 'oid':'6651cd53-5884-4931-ace8-4628d2a2a525'}
],
oracles:[
{'oid':'6651cd53-5884-4931-ace8-4628d2a2a525', 'oname':'VARCHAR2'},
{'oid':'73a413d8-7e7e-447b-b57e-a91ea23a523d', 'oname':'NUMBER'},
{'oid':'797ab047-8b7b-43bf-989e-ea3a5ed5c88a', 'oname':'DATE'},
{'oid':'86bcead6-992f-4528-b67b-78f8cceeb080', 'oname':'BLOB'},
{'oid':'5b3ec3b8-d4cd-48de-b40e-06a9fd0dd780', 'oname':'CLOB'},
{'oid':'fb6d4639-2556-409f-b2ad-7a1b0362631e', 'oname':'NCOB'},
{'oid':'f6be9040-1bfc-4207-8121-8ce9bd30439c', 'oname':'CHAR'},
{'oid':'cf8583b4-ec77-42d5-afe3-ac4995d92ff3', 'oname':'LONG'},
{'oid':'fab981f3-5cfb-4c07-a212-e530b6541a39', 'oname':'RAW'},
{'oid':'86fdc1e6-1866-47c7-a325-329636b96944', 'oname':'NVARCHAR'},
{'oid':'3b12ba1f-6cca-4188-9ef9-2531bb947694', 'oname':'BINARY_DOUBLE'},
{'oid':'7c16f55b-739b-416c-8c03-25c548dd4613', 'oname':'BINARY_FLOAT'},
{'oid':'520016f5-8182-4cbe-937e-17f815eeba7b', 'oname':'INTERVA DAY TO SECOND'},
{'oid':'bd64e1e1-cff7-4bd4-ae5a-038d5b613bea', 'oname':'INTERVA VEAR TO MONTH'},
{'oid':'d9abf428-c51b-4c00-b2d2-5dd1ea5d3972', 'oname':'LONG RAW'},
{'oid':'895162a3-8e7c-4632-883a-aa8840489169', 'oname':'TIMESTAMP'},
{'oid':'88e51218-851e-4fd3-803f-4491e3f32cd1', 'oname':'TIMESTAMP WITH LOCA TIME ZONE'},
{'oid':'032c8f00-0b86-47fb-8cda-3c6de444c611', 'oname':'TIMESTAMP WT1 TME Z0NE'}
]
}
},
})
</script>
<style>
*{
padding: 0;
margin: 0;
}
.el-form-item{
margin: 10px;
}
</style>
</body>
</html>