-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #18 from vueblocks/develop
Develop
- Loading branch information
Showing
38 changed files
with
1,182 additions
and
153 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <template> | ||
| <section class="basic-add-item"> | ||
| <el-form size="small" label-width="100px" :model="model" :rules="rules" ref="ruleForm"> | ||
| <schema-form | ||
| :model="model" | ||
| :schema="schema" | ||
| > | ||
| <el-button | ||
| v-for="flag in indexList" | ||
| :key="flag" | ||
| :slot="`delete_${flag}`" | ||
| size="small" | ||
| type="primary" | ||
| class="delBtn" | ||
| @click="delDomain(flag)" | ||
| >删除</el-button> | ||
| <el-form-item slot="submit"> | ||
| <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> | ||
| <el-button type="primary" plain @click="addDomain">新增域名</el-button> | ||
| <el-button @click="resetForm('ruleForm')">重置</el-button> | ||
| </el-form-item> | ||
| </schema-form> | ||
| </el-form> | ||
| </section> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data () { | ||
| return { | ||
| indexList: [0], | ||
| flagRecord: 0, | ||
| ss: 'delete_0', | ||
| model: { | ||
| email: '', | ||
| domains_0: '' | ||
| }, | ||
| rules: { | ||
| email: [ | ||
| { required: true, message: '请输入邮箱地址', trigger: 'blur' }, | ||
| { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| computed: { | ||
| schema () { | ||
| let _list = this.indexList.map((flag, index) => ([ | ||
| { | ||
| type: 'input', | ||
| prop: `domains_${flag}`, | ||
| formItem: { label: `域名${index}`, | ||
| rules: { required: true, message: '域名不能为空', trigger: 'blur' } }, | ||
| colGrid: { span: 20 } | ||
| }, | ||
| { slot: `delete_${flag}`, colGrid: { span: 4 } } | ||
| ])) | ||
| return [ | ||
| [ { type: 'input', prop: 'email', formItem: { label: '邮箱' } } ], | ||
| ..._list, | ||
| [ { slot: 'submit' } ] | ||
| ] | ||
| } | ||
| }, | ||
| methods: { | ||
| submitForm(formName) { | ||
| this.$refs[formName].validate((valid) => { | ||
| if (valid) { | ||
| alert('submit!'); | ||
| } else { | ||
| return false; | ||
| } | ||
| }) | ||
| }, | ||
| resetForm(formName) { | ||
| this.$refs[formName].resetFields() | ||
| }, | ||
| addDomain () { | ||
| this.flagRecord += 1 | ||
| this.indexList.push(this.flagRecord) | ||
| }, | ||
| delDomain (flag) { | ||
| this.indexList = this.indexList.filter(idx => idx !== flag) | ||
| this.model = this.model.$delete(`delete_${flag}`) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .basic-add-item .delBtn{ | ||
| margin-left: 20px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| <template> | ||
| <section class="basic-instance"> | ||
| <el-form size="small" label-width="100px" :model="model" :rules="rules" ref="ruleForm"> | ||
| <schema-form | ||
| :model="model" | ||
| :layout="layout" | ||
| :schema="schema" | ||
| :options="options" | ||
| > | ||
| <div class="line" slot="line"></div> | ||
| <el-form-item slot="submit"> | ||
| <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> | ||
| <el-button @click="resetForm('ruleForm')">重置</el-button> | ||
| </el-form-item> | ||
| </schema-form> | ||
| </el-form> | ||
| </section> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data () { | ||
| return { | ||
| layout: { | ||
| type: 'flex', | ||
| align: 'middle' | ||
| }, | ||
| model: { | ||
| name: '', | ||
| region: '', | ||
| date1: '', | ||
| date2: '', | ||
| delivery: false, | ||
| type: [], | ||
| resource: '', | ||
| desc: '' | ||
| }, | ||
| schema: [ | ||
| [ | ||
| { type: 'input', prop: 'name', formItem: { label: '活动名称' } } | ||
| ], | ||
| [ | ||
| { type: 'select', prop: 'region', formItem: { label: '活动区域' } } | ||
| ], | ||
| [ | ||
| { | ||
| type: 'datepicker', | ||
| prop: 'date1', | ||
| formItem: { label: '活动时间' }, | ||
| colGrid: { span:11 } | ||
| }, | ||
| { slot: 'line', colGrid: { span:2 } }, | ||
| { | ||
| type: 'timeselect', | ||
| prop: 'date2', | ||
| formItem: { label: '', 'label-width': '0px' }, | ||
| colGrid: { span:11 } | ||
| } | ||
| ], | ||
| [ | ||
| { type: 'switch', prop: 'delivery', formItem: { label: '即时配送' } } | ||
| ], | ||
| [ | ||
| { type: 'checkbox', prop: 'type', formItem: { label: '活动性质' } } | ||
| ], | ||
| [ | ||
| { type: 'radio', prop: 'resource', formItem: { label: '特殊资源' } } | ||
| ], | ||
| [ | ||
| { | ||
| type: 'input', | ||
| prop: 'desc', | ||
| formItem: { label: '活动形式' }, | ||
| attrs: { type: 'textarea' } | ||
| } | ||
| ], | ||
| [ | ||
| { slot: 'submit' } | ||
| ] | ||
| ], | ||
| options: { | ||
| region: [ | ||
| { label: '区域一', value: 'shanghai' }, | ||
| { label: '区域二', value: 'beijing' } | ||
| ], | ||
| type: [ | ||
| { label: '美食/餐厅线上活动', value: '美食/餐厅线上活动' }, | ||
| { label: '地推活动', value: '地推活动' } | ||
| ], | ||
| resource: [ | ||
| { label: '线上品牌商赞助', value: '线上品牌商赞助' }, | ||
| { label: '线下场地免费', value: '线下场地免费' } | ||
| ], | ||
| }, | ||
| rules: { | ||
| name: [ | ||
| { required: true, message: '请输入活动名称', trigger: 'blur' }, | ||
| { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } | ||
| ], | ||
| region: [ | ||
| { required: true, message: '请选择活动区域', trigger: 'change' } | ||
| ], | ||
| date1: [ | ||
| { type: 'date', required: true, message: '请选择日期', trigger: 'change' } | ||
| ], | ||
| date2: [ | ||
| { type: 'date', required: true, message: '请选择时间', trigger: 'change' } | ||
| ], | ||
| type: [ | ||
| { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } | ||
| ], | ||
| resource: [ | ||
| { required: true, message: '请选择活动资源', trigger: 'change' } | ||
| ], | ||
| desc: [ | ||
| { required: true, message: '请填写活动形式', trigger: 'blur' } | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| submitForm(formName) { | ||
| this.$refs[formName].validate((valid) => { | ||
| if (valid) { | ||
| alert('submit!'); | ||
| } else { | ||
| return false; | ||
| } | ||
| }) | ||
| }, | ||
| resetForm(formName) { | ||
| this.$refs[formName].resetFields() | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .basic-instance .line{ | ||
| height: 2px; | ||
| background: rgb(220, 223, 230); | ||
| margin: -10px 5px 0; | ||
| } | ||
| </style> |
Oops, something went wrong.