Skip to content

Commit 4b72b93

Browse files
Merge pull request #18 from vueblocks/develop
Develop
2 parents 794df49 + a0c7813 commit 4b72b93

38 files changed

+1182
-153
lines changed

CHANGELOG.md

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
## [0.1.3](https://github.com/vueblocks/element-schema-form/compare/v0.1.2...v0.1.3) (2019-11-01)
2+
3+
4+
### Bug Fixes
5+
6+
* schema-form插槽错误 ([fe43fbb](https://github.com/vueblocks/element-schema-form/commit/fe43fbb4c47984f092254536eff93c800617e6e7))
7+
8+
9+
110
## [0.1.2](https://github.com/vueblocks/element-schema-form/compare/v0.1.1...v0.1.2) (2019-10-30)
211

312

@@ -7,41 +16,41 @@
716

817
### Features
918

10-
* 新增【重置表单】功能 ([9da36a3](https://github.com/vueblocks/element-schema-form/commit/9da36a3))
19+
* 新增【重置表单】功能 ([9da36a3](https://github.com/vueblocks/element-schema-form/commit/9da36a37cadf06bedabf4bbdb9994ac620fa13e3))
1120

1221

1322

14-
# [0.1.0](https://github.com/vueblocks/element-schema-form/compare/9c61589...v0.1.0) (2019-10-28)
23+
# [0.1.0](https://github.com/vueblocks/element-schema-form/compare/9c615890fe925a11c33f3b3534381332b9867cf7...v0.1.0) (2019-10-28)
1524

1625

1726
### Bug Fixes
1827

19-
* copy 激活行数调整,api将module修改为model ([d3682be](https://github.com/vueblocks/element-schema-form/commit/d3682be))
28+
* copy 激活行数调整,api将module修改为model ([d3682be](https://github.com/vueblocks/element-schema-form/commit/d3682be362dec1c3f96ee120fcebaf27664a75e4))
2029

2130

2231
### Features
2332

24-
* 🌈完成生成 Vue 代码功能 ([215dac0](https://github.com/vueblocks/element-schema-form/commit/215dac0))
25-
* 💥引入 vuex-persistedstate 数据持久化插件 ([e825350](https://github.com/vueblocks/element-schema-form/commit/e825350))
26-
* 📋添加复制代码到剪切板功能 ([8e069b3](https://github.com/vueblocks/element-schema-form/commit/8e069b3))
27-
* 修改布局算法 ([0d38a49](https://github.com/vueblocks/element-schema-form/commit/0d38a49))
28-
* 基础组件 ([9c61589](https://github.com/vueblocks/element-schema-form/commit/9c61589))
29-
* 增加json编辑器 ([3887414](https://github.com/vueblocks/element-schema-form/commit/3887414))
30-
* 增加列跨度配置 ([b6d72c6](https://github.com/vueblocks/element-schema-form/commit/b6d72c6))
31-
* 增加拓展组件 ([d635fdd](https://github.com/vueblocks/element-schema-form/commit/d635fdd))
32-
* 增加组件个性化属性(1) ([2ca9dc7](https://github.com/vueblocks/element-schema-form/commit/2ca9dc7))
33-
* 增加组件基础属性编辑 ([30d335e](https://github.com/vueblocks/element-schema-form/commit/30d335e))
34-
* 增加表单预览 ([a70c222](https://github.com/vueblocks/element-schema-form/commit/a70c222))
35-
* 处理左侧布局删除列逻辑 ([c047010](https://github.com/vueblocks/element-schema-form/commit/c047010))
36-
* 完成生成 Schema 功能 ([dcbe5c5](https://github.com/vueblocks/element-schema-form/commit/dcbe5c5))
37-
* 搭建表单生成器页面 ([62d3085](https://github.com/vueblocks/element-schema-form/commit/62d3085))
38-
* 新增/删除行 ([f99ad57](https://github.com/vueblocks/element-schema-form/commit/f99ad57))
39-
* 新增tag等基本组件 ([3e8c38d](https://github.com/vueblocks/element-schema-form/commit/3e8c38d))
40-
* 新增列排序功能 ([0a74c03](https://github.com/vueblocks/element-schema-form/commit/0a74c03))
41-
* 新增行复制 ([6698e11](https://github.com/vueblocks/element-schema-form/commit/6698e11))
42-
* 新增表单列删除功能 ([c08c8c0](https://github.com/vueblocks/element-schema-form/commit/c08c8c0))
43-
* 新增表单配置面板 ([ecdbee5](https://github.com/vueblocks/element-schema-form/commit/ecdbee5))
44-
* 私有属性调整 ([cf61919](https://github.com/vueblocks/element-schema-form/commit/cf61919))
33+
* 🌈完成生成 Vue 代码功能 ([215dac0](https://github.com/vueblocks/element-schema-form/commit/215dac0ce0987f5e59b3507a51f5431da59af09e))
34+
* 💥引入 vuex-persistedstate 数据持久化插件 ([e825350](https://github.com/vueblocks/element-schema-form/commit/e825350561a37de53ecb78fa4d789bc7875ada5e))
35+
* 📋添加复制代码到剪切板功能 ([8e069b3](https://github.com/vueblocks/element-schema-form/commit/8e069b36113d7357705d30acf77b208b4a8d70b9))
36+
* 修改布局算法 ([0d38a49](https://github.com/vueblocks/element-schema-form/commit/0d38a493503b80369276d6756de037571ea9847d))
37+
* 基础组件 ([9c61589](https://github.com/vueblocks/element-schema-form/commit/9c615890fe925a11c33f3b3534381332b9867cf7))
38+
* 增加json编辑器 ([3887414](https://github.com/vueblocks/element-schema-form/commit/38874147675504d40a670bacd4373dd109bc5f45))
39+
* 增加列跨度配置 ([b6d72c6](https://github.com/vueblocks/element-schema-form/commit/b6d72c60720645b02076466f3bbd67e215934b3e))
40+
* 增加拓展组件 ([d635fdd](https://github.com/vueblocks/element-schema-form/commit/d635fdd40349e93eecda0f52a9c249d2b87b0a6a))
41+
* 增加组件个性化属性(1) ([2ca9dc7](https://github.com/vueblocks/element-schema-form/commit/2ca9dc74b296f6d0de97d6493245cde3aeca5afe))
42+
* 增加组件基础属性编辑 ([30d335e](https://github.com/vueblocks/element-schema-form/commit/30d335ebede61056ca1c5c941d673a638c14429c))
43+
* 增加表单预览 ([a70c222](https://github.com/vueblocks/element-schema-form/commit/a70c2222bc5358cd2e440299d0acd78032649599))
44+
* 处理左侧布局删除列逻辑 ([c047010](https://github.com/vueblocks/element-schema-form/commit/c04701062e7eb8fbc2b59f66b8675cb15c172c5e))
45+
* 完成生成 Schema 功能 ([dcbe5c5](https://github.com/vueblocks/element-schema-form/commit/dcbe5c51500a3f6b63985597b275d954a464ac3c))
46+
* 搭建表单生成器页面 ([62d3085](https://github.com/vueblocks/element-schema-form/commit/62d30855341080e3de09b4291263fca3228cd5e5))
47+
* 新增/删除行 ([f99ad57](https://github.com/vueblocks/element-schema-form/commit/f99ad57357db78ba3fc4f31aaee6a61e17d1a49b))
48+
* 新增tag等基本组件 ([3e8c38d](https://github.com/vueblocks/element-schema-form/commit/3e8c38d56962faeb4e9f13a28f9af1fa9b8b863e))
49+
* 新增列排序功能 ([0a74c03](https://github.com/vueblocks/element-schema-form/commit/0a74c03c62e4ada86d98127566a8cb5449cc324e))
50+
* 新增行复制 ([6698e11](https://github.com/vueblocks/element-schema-form/commit/6698e11a3505fa884026ccfe981d543b82086cb4))
51+
* 新增表单列删除功能 ([c08c8c0](https://github.com/vueblocks/element-schema-form/commit/c08c8c0c44bdb3ed76d9fce333992069cfb972d6))
52+
* 新增表单配置面板 ([ecdbee5](https://github.com/vueblocks/element-schema-form/commit/ecdbee5557f6cddfe28617939f189d4f9de61992))
53+
* 私有属性调整 ([cf61919](https://github.com/vueblocks/element-schema-form/commit/cf6191953e5117db4138d255dfd438022c03ddf5))
4554

4655

4756

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<template>
2+
<section class="basic-add-item">
3+
<el-form size="small" label-width="100px" :model="model" :rules="rules" ref="ruleForm">
4+
<schema-form
5+
:model="model"
6+
:schema="schema"
7+
>
8+
<el-button
9+
v-for="flag in indexList"
10+
:key="flag"
11+
:slot="`delete_${flag}`"
12+
size="small"
13+
type="primary"
14+
class="delBtn"
15+
@click="delDomain(flag)"
16+
>删除</el-button>
17+
<el-form-item slot="submit">
18+
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
19+
<el-button type="primary" plain @click="addDomain">新增域名</el-button>
20+
<el-button @click="resetForm('ruleForm')">重置</el-button>
21+
</el-form-item>
22+
</schema-form>
23+
</el-form>
24+
</section>
25+
</template>
26+
27+
<script>
28+
export default {
29+
data () {
30+
return {
31+
indexList: [0],
32+
flagRecord: 0,
33+
ss: 'delete_0',
34+
model: {
35+
email: '',
36+
domains_0: ''
37+
},
38+
rules: {
39+
email: [
40+
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
41+
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
42+
]
43+
}
44+
}
45+
},
46+
computed: {
47+
schema () {
48+
let _list = this.indexList.map((flag, index) => ([
49+
{
50+
type: 'input',
51+
prop: `domains_${flag}`,
52+
formItem: { label: `域名${index}`,
53+
rules: { required: true, message: '域名不能为空', trigger: 'blur' } },
54+
colGrid: { span: 20 }
55+
},
56+
{ slot: `delete_${flag}`, colGrid: { span: 4 } }
57+
]))
58+
return [
59+
[ { type: 'input', prop: 'email', formItem: { label: '邮箱' } } ],
60+
..._list,
61+
[ { slot: 'submit' } ]
62+
]
63+
}
64+
},
65+
methods: {
66+
submitForm(formName) {
67+
this.$refs[formName].validate((valid) => {
68+
if (valid) {
69+
alert('submit!');
70+
} else {
71+
return false;
72+
}
73+
})
74+
},
75+
resetForm(formName) {
76+
this.$refs[formName].resetFields()
77+
},
78+
addDomain () {
79+
this.flagRecord += 1
80+
this.indexList.push(this.flagRecord)
81+
},
82+
delDomain (flag) {
83+
this.indexList = this.indexList.filter(idx => idx !== flag)
84+
this.model = this.model.$delete(`delete_${flag}`)
85+
}
86+
}
87+
}
88+
</script>
89+
90+
<style scoped>
91+
92+
.basic-add-item .delBtn{
93+
margin-left: 20px;
94+
}
95+
</style>
Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<template>
2+
<section class="basic-instance">
3+
<el-form size="small" label-width="100px" :model="model" :rules="rules" ref="ruleForm">
4+
<schema-form
5+
:model="model"
6+
:layout="layout"
7+
:schema="schema"
8+
:options="options"
9+
>
10+
<div class="line" slot="line"></div>
11+
<el-form-item slot="submit">
12+
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
13+
<el-button @click="resetForm('ruleForm')">重置</el-button>
14+
</el-form-item>
15+
</schema-form>
16+
</el-form>
17+
</section>
18+
</template>
19+
20+
<script>
21+
export default {
22+
data () {
23+
return {
24+
layout: {
25+
type: 'flex',
26+
align: 'middle'
27+
},
28+
model: {
29+
name: '',
30+
region: '',
31+
date1: '',
32+
date2: '',
33+
delivery: false,
34+
type: [],
35+
resource: '',
36+
desc: ''
37+
},
38+
schema: [
39+
[
40+
{ type: 'input', prop: 'name', formItem: { label: '活动名称' } }
41+
],
42+
[
43+
{ type: 'select', prop: 'region', formItem: { label: '活动区域' } }
44+
],
45+
[
46+
{
47+
type: 'datepicker',
48+
prop: 'date1',
49+
formItem: { label: '活动时间' },
50+
colGrid: { span:11 }
51+
},
52+
{ slot: 'line', colGrid: { span:2 } },
53+
{
54+
type: 'timeselect',
55+
prop: 'date2',
56+
formItem: { label: '', 'label-width': '0px' },
57+
colGrid: { span:11 }
58+
}
59+
],
60+
[
61+
{ type: 'switch', prop: 'delivery', formItem: { label: '即时配送' } }
62+
],
63+
[
64+
{ type: 'checkbox', prop: 'type', formItem: { label: '活动性质' } }
65+
],
66+
[
67+
{ type: 'radio', prop: 'resource', formItem: { label: '特殊资源' } }
68+
],
69+
[
70+
{
71+
type: 'input',
72+
prop: 'desc',
73+
formItem: { label: '活动形式' },
74+
attrs: { type: 'textarea' }
75+
}
76+
],
77+
[
78+
{ slot: 'submit' }
79+
]
80+
],
81+
options: {
82+
region: [
83+
{ label: '区域一', value: 'shanghai' },
84+
{ label: '区域二', value: 'beijing' }
85+
],
86+
type: [
87+
{ label: '美食/餐厅线上活动', value: '美食/餐厅线上活动' },
88+
{ label: '地推活动', value: '地推活动' }
89+
],
90+
resource: [
91+
{ label: '线上品牌商赞助', value: '线上品牌商赞助' },
92+
{ label: '线下场地免费', value: '线下场地免费' }
93+
],
94+
},
95+
rules: {
96+
name: [
97+
{ required: true, message: '请输入活动名称', trigger: 'blur' },
98+
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
99+
],
100+
region: [
101+
{ required: true, message: '请选择活动区域', trigger: 'change' }
102+
],
103+
date1: [
104+
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
105+
],
106+
date2: [
107+
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
108+
],
109+
type: [
110+
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
111+
],
112+
resource: [
113+
{ required: true, message: '请选择活动资源', trigger: 'change' }
114+
],
115+
desc: [
116+
{ required: true, message: '请填写活动形式', trigger: 'blur' }
117+
]
118+
}
119+
}
120+
},
121+
methods: {
122+
submitForm(formName) {
123+
this.$refs[formName].validate((valid) => {
124+
if (valid) {
125+
alert('submit!');
126+
} else {
127+
return false;
128+
}
129+
})
130+
},
131+
resetForm(formName) {
132+
this.$refs[formName].resetFields()
133+
}
134+
}
135+
}
136+
</script>
137+
138+
<style scoped>
139+
.basic-instance .line{
140+
height: 2px;
141+
background: rgb(220, 223, 230);
142+
margin: -10px 5px 0;
143+
}
144+
</style>

0 commit comments

Comments
 (0)