Skip to content

Commit c511e67

Browse files
IMMRCLAYIMMRCLAY
committed
文件
1 parent 74cef14 commit c511e67

File tree

4 files changed

+148
-6
lines changed

4 files changed

+148
-6
lines changed

‎src/App.vue

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
11
<template>
22
<div id="app">
3-
<img src="./assets/logo.png">
3+
<!--<img src="./assets/logo.png">-->
44
<router-view/>
55
</div>
66
</template>
77

88
<script>
9+
910
export default {
10-
name: 'App'
11+
name: 'App',
12+
data () {
13+
return {}
14+
}
1115
}
1216
</script>
1317

1418
<style>
19+
*{
20+
margin:0;
21+
padding:0;
22+
}
23+
html,body{
24+
height:100%;
25+
}
1526
#app {
1627
font-family: 'Avenir', Helvetica, Arial, sans-serif;
1728
-webkit-font-smoothing: antialiased;
1829
-moz-osx-font-smoothing: grayscale;
1930
text-align: center;
2031
color: #2c3e50;
21-
margin-top: 60px;
32+
height:100%;
2233
}
2334
</style>

‎src/components/Head.vue

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="head">
3+
FormBuild
4+
</div>
5+
</template>
6+
<style>
7+
.head{
8+
width:100%;
9+
height: 50px;
10+
-webkit-box-shadow: 0 2px 10px rgba(70,160,252,.6);
11+
box-shadow: 0 2px 10px rgba(70,160,252,.6);
12+
padding: 0 10px;
13+
background-image: -webkit-gradient(linear,left top,right top,from(#1278f6),to(#00b4aa));
14+
background-image: linear-gradient(90deg,#1278f6,#00b4aa);
15+
position: relative;
16+
}
17+
</style>
18+
<script>
19+
export default {
20+
data () {
21+
return {}
22+
}
23+
}
24+
</script>

‎src/pages/home.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<template>
2+
<div class="home">
3+
<!--<div class="menu">
4+
<span>文本框</span>
5+
</div>
6+
<div class="content">
7+
8+
</div>
9+
<div class="operation">
10+
11+
</div>-->
12+
<Head></Head>
13+
<fm-making-form :data="jsonData"
14+
:remote="remoteFuncs"
15+
:value="values"
16+
ref="generateForm">
17+
<template slot="action">
18+
<div @click="getHtml" class="get">getHtml</div>
19+
</template>
20+
</fm-making-form>
21+
</div>
22+
</template>
23+
<style lang="less" scoped>
24+
.home {
25+
width:100%;
26+
height:100%;
27+
display:flex;
28+
flex-flow: column;
29+
.menu{
30+
width:20%;
31+
height:100%;
32+
display:flex;
33+
display:-webkit-box;
34+
border-right:1px solid #17A6B5;
35+
span{
36+
cursor: pointer;
37+
padding:5px 10px;
38+
background-color: #17A6B5;
39+
margin:10px;
40+
border-radius:8px;
41+
}
42+
}
43+
.content{
44+
width:50%;
45+
height:100%;
46+
border-right:1px solid #17A6B5;
47+
padding:0 10px;
48+
}
49+
.operation{
50+
width:30%;
51+
height:100%;
52+
/*background-color: #0B0B0B;*/
53+
}
54+
}
55+
</style>
56+
<script>
57+
import Head from '../components/Head.vue'
58+
export default {
59+
components: {
60+
Head
61+
},
62+
data () {
63+
return {
64+
jsonData: {}, // 表单配置中生成的json数据
65+
values: {}, // 表单需要显示的表单数据
66+
remoteFuncs: {
67+
// 组件配置时配置的远端方法,保持和配置时输入的名称一致
68+
func_test (resolve) {
69+
// 模拟接口请求
70+
setTimeout(() => {
71+
const options = [
72+
{id: '1', name: '1111'},
73+
{id: '2', name: '2222'},
74+
{id: '3', name: '3333'}
75+
]
76+
77+
// 获取到的值和标签可以通过配置页远端配置
78+
// 值:id 标签：name
79+
80+
resolve(options) // 将后端获取的数据放入回调函数中
81+
}, 2000)
82+
}
83+
}
84+
}
85+
},
86+
methods: {
87+
getHtml (e) {
88+
console.log(this.$refs.generateForm.widgetForm)
89+
90+
this.$refs.generateForm.getHtml().then(data => {
91+
// 数据校验成功
92+
// data 为获取的表单数据
93+
console.log(data)
94+
}).catch(e => {
95+
// 数据校验失败
96+
})
97+
}
98+
}
99+
}
100+
</script>

‎src/router/index.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
import Vue from 'vue'
22
import Router from 'vue-router'
3-
import HelloWorld from '@/components/HelloWorld'
3+
// import HelloWorld from '@/components/HelloWorld'
4+
import Home from '@/pages/home'
5+
import ElementUI from 'element-ui'
6+
import 'element-ui/lib/theme-chalk/index.css'
7+
import FormMaking from 'form-making'
8+
import 'form-making/dist/FormMaking.css'
49

510
Vue.use(Router)
11+
Vue.use(ElementUI)
12+
Vue.use(FormMaking)
613

714
export default new Router({
815
routes: [
916
{
1017
path: '/',
11-
name: 'HelloWorld',
12-
component: HelloWorld
18+
name: 'Home',
19+
component: Home
1320
}
1421
]
1522
})

0 commit comments

Comments
 (0)