Skip to content

Commit 18e160b

Browse files
vincentzycvincentzyc
committed
结构优化
1 parent 9eecfb6 commit 18e160b

10 files changed

Lines changed: 206 additions & 142 deletions

File tree

‎public/index.html‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title>form-design</title>
9-
</head>
10-
<body>
11-
<noscript>
12-
<strong>We're sorry but form-design doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13-
</noscript>
14-
<div id="app"></div>
15-
<!-- built files will be auto injected -->
16-
</body>
17-
</html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
9+
<title>form-design</title>
10+
</head>
11+
12+
<body>
13+
<noscript>
14+
<strong>We're sorry but form-design doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15+
</noscript>
16+
<div id="app"></div>
17+
<!-- built files will be auto injected -->
18+
</body>
19+
20+
</html>

‎src/assets/css/widget.scss‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ $primary-background-color: #ecf5ff;
1111
.widget-form-list {
1212
min-height: 100%;
1313
box-shadow: 0 2px 5px 1px rgba(124, 124, 124, .2);
14-
padding-bottom: 150px;
14+
padding-bottom: 200px;
1515
margin: 20px;
1616

1717
.ghost {
@@ -61,19 +61,13 @@ $primary-background-color: #ecf5ff;
6161
.widget-view.widget-view-imgshow {
6262
padding: 0;
6363
background: #f1f1f1;
64-
border-bottom: none;
65-
}
66-
67-
.widget-view.widget-view-button {
68-
border-bottom: none;
6964
}
7065

7166
.widget-view {
7267
margin: 0;
7368
padding: 10px;
7469
background: #fff;
7570
position: relative;
76-
border-bottom: 1px solid #eee;
7771

7872
&:after {
7973
content: "";
@@ -86,7 +80,7 @@ $primary-background-color: #ecf5ff;
8680
z-index: 1001;
8781
}
8882

89-
&::-webkit-input-placeholder {
83+
input::-webkit-input-placeholder {
9084
color: #999;
9185
opacity: 1;
9286
}
@@ -123,11 +117,7 @@ $primary-background-color: #ecf5ff;
123117
}
124118
}
125119
.wg-staticText {
126-
.text {
127-
font-size: 14px;
128-
color: #333;
129-
line-height: 24px;
130-
}
120+
line-height: 1.6;
131121
}
132122

133123
.wg-input, .wg-select {

‎src/assets/json/page-config.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"title": "骏伯网络",
3+
"themes":[{
4+
"type": "theme1",
5+
"name": "主题1",
6+
"list":[]
7+
}]
8+
}

‎src/assets/json/widget.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,8 @@
8282
"type": "staticText",
8383
"name": "文本描述",
8484
"value": "文本描述",
85-
"textAlign": "left"
85+
"textAlign": "left",
86+
"fontSize":"14",
87+
"color":"#333333"
8688
}]
8789
}

‎src/components/page-config.vue‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<template>
22
<div class="form-config-container">
33
<el-form label-position="top">
4-
<el-form-item label="页面标题">
4+
<el-form-item label="页面标题" v-if="typeof(pageData.config.title)!=='undefined'">
55
<el-input v-model="pageData.config.title"></el-input>
66
</el-form-item>
77
</el-form>
8-
<!-- <button @click="test()">testetetse</button> -->
98
</div>
109
</template>
1110

@@ -16,11 +15,6 @@ export default {
1615
...mapState({
1716
pageData: state => state.common.pageData
1817
})
19-
},
20-
methods: {
21-
test() {
22-
console.log(this.$store.state);
23-
}
2418
}
2519
}
2620
</script>

‎src/components/widget-config.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,22 @@
2424
<el-form-item label="提示内容" v-if="Object.keys(selectWg).indexOf('placeholder')>=0">
2525
<el-input v-model="selectWg.placeholder"></el-input>
2626
</el-form-item>
27-
<el-form-item label="文字内容" v-if="selectWg.type==='staticText'">
27+
<el-form-item label="文本内容" v-if="selectWg.type==='staticText'">
2828
<el-input type="textarea" v-model="selectWg.value"></el-input>
2929
</el-form-item>
30-
<el-form-item label="文字对齐方式" v-if="Object.keys(selectWg).indexOf('textAlign')>=0">
30+
<el-form-item label="文本对齐方式" v-if="Object.keys(selectWg).indexOf('textAlign')>=0">
3131
<el-radio-group v-model="selectWg.textAlign" size="mini">
3232
<el-radio-button label="left">左对齐</el-radio-button>
3333
<el-radio-button label="center">居中对齐</el-radio-button>
3434
<el-radio-button label="right">右对齐</el-radio-button>
3535
</el-radio-group>
3636
</el-form-item>
37+
<el-form-item label="文字大小（px）" v-if="Object.keys(selectWg).indexOf('fontSize')>=0">
38+
<el-input-number v-model="selectWg.fontSize" :min="10" :max="30" size="small"></el-input-number>
39+
</el-form-item>
40+
<el-form-item label="文字颜色" v-if="Object.keys(selectWg).indexOf('color')>=0">
41+
<el-color-picker v-model="selectWg.color"></el-color-picker>
42+
</el-form-item>
3743
<el-form-item label="是否单选" v-if="Object.keys(selectWg).indexOf('isRadio')>=0">
3844
<el-switch v-model="selectWg.isRadio" @change="isRadio"></el-switch>
3945
</el-form-item>

‎src/components/widget-form-item.vue‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<template>
2+
<div class="widget-view" :class="{active: selectWg.key === item.key,'widget-view-imgshow':item.type === 'imgshow'}" @click="handleSelectWidget(index)">
3+
<div v-if="item.type === 'phone'" class="wg-phone">
4+
<div class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
5+
<div class="wg-title" v-show="item.showLabel">{{item.title}}</div>
6+
<div class="flex-auto">
7+
<input class="wg-input" v-model="item.value" :placeholder="item.placeholder">
8+
</div>
9+
</div>
10+
<div class="flex" v-if="item.showCode">
11+
<input placeholder="验证码" class="wg-input flex-auto">
12+
<button class="getVerCode-btn">获取验证码</button>
13+
</div>
14+
</div>
15+
16+
<div v-if="item.type === 'input'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
17+
<div class="wg-title" v-show="item.showLabel">{{item.title}}</div>
18+
<div class="flex-auto">
19+
<input v-model="item.value" :placeholder="item.placeholder" class="wg-input">
20+
</div>
21+
</div>
22+
23+
<div v-if="item.type === 'checkbox'" class="wg-item flex-wrap wg-checkbox" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
24+
<div class="wg-title">{{item.title}}</div>
25+
<div class="flex-auto">
26+
<label class="label" v-for="(optionsItem, key) in item.options" :key="optionsItem + key">
27+
<input class="wg-checkbox-input" :type="item.isRadio?'radio':'checkbox'" :value="optionsItem" v-model="item.value" style="display:none">
28+
<span>{{optionsItem}}</span>
29+
</label>
30+
</div>
31+
</div>
32+
33+
<div v-if="item.type === 'select'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
34+
<div class="wg-title" v-show="item.showLabel">{{item.title}}</div>
35+
<div class="flex-auto">
36+
<select v-model="item.value" class="wg-select flex-auto">
37+
<option value disabled selected hidden>{{item.placeholder}}</option>
38+
<option v-for="item in item.options" :key="item" :value="item" :label="item.showLabel?item.label:item"></option>
39+
</select>
40+
</div>
41+
</div>
42+
43+
<div v-if="item.type==='switch'" class="wg-item wg-switch" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
44+
<div class="wg-title">{{item.title}}</div>
45+
<label class="label">
46+
<input type="checkbox" class="wg-switch-input" v-model="item.value" style="display:none">
47+
<span class="wg-switch-core"></span>
48+
</label>
49+
</div>
50+
51+
<div v-if="item.type === 'date'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
52+
<div class="wg-title">{{item.title}}</div>
53+
<div class="flex-auto">
54+
<input type="date" v-model="item.value" class="wg-input flex-auto">
55+
</div>
56+
</div>
57+
58+
<div class="flex flex-center" v-if="item.type === 'imgshow'">
59+
<img v-if="item.value" :src="item.value" alt="图片展示" width="100%">
60+
<img v-else src="@/assets/img/img-placeholder.png" alt="图片展示">
61+
</div>
62+
63+
<div class="flex flex-center" v-if="item.type === 'button'">
64+
<button class="wg-button">{{item.btnText}}</button>
65+
</div>
66+
67+
<div v-if="item.type === 'staticText'" class="wg-staticText">
68+
<p :style="{textAlign:item.textAlign,fontSize:item.fontSize+'px',color:item.color}">{{item.value}}</p>
69+
</div>
70+
71+
<el-button title="删除" @click.stop="handleWidgetDelete(index)" class="widget-action-delete" v-if="selectWg.key === item.key" circle plain type="danger">删除</el-button>
72+
<el-button title="复制" @click.stop="handleWidgetClone(index)" class="widget-action-clone" v-if="selectWg.key === item.key" circle plain type="primary">复制</el-button>
73+
</div>
74+
</template>
75+
76+
<script>
77+
import { mapState } from 'vuex';
78+
79+
export default {
80+
props: {
81+
item: Object,
82+
index: Number
83+
},
84+
data() {
85+
return {
86+
}
87+
},
88+
computed: {
89+
...mapState({
90+
selectWg: state => state.common.selectWg,
91+
pageData: state => state.common.pageData
92+
})
93+
},
94+
methods: {
95+
handleSelectWidget(index) {
96+
this.$store.commit('setSelectWg', this.pageData.list[index])
97+
},
98+
handleWidgetDelete(index) {
99+
if (this.pageData.list.length - 1 === index) {
100+
if (index === 0) {
101+
this.$store.commit('setSelectWg', {})
102+
} else {
103+
this.$store.commit('setSelectWg', this.pageData.list[index - 1])
104+
}
105+
} else {
106+
this.$store.commit('setSelectWg', this.pageData.list[index + 1])
107+
}
108+
this.$nextTick(() => {
109+
this.pageData.list.splice(index, 1)
110+
})
111+
},
112+
handleWidgetClone(index) {
113+
let cloneData = this.$api.deepClone(this.pageData.list[index]);
114+
cloneData.key = this.pageData.list[index].type + '_' + Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
115+
this.pageData.list.splice(index, 0, cloneData)
116+
this.$nextTick(() => {
117+
this.$store.commit('setSelectWg', this.pageData.list[index + 1])
118+
})
119+
},
120+
}
121+
}
122+
</script>

‎src/components/widget-form.vue‎

Lines changed: 4 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -10,100 +10,7 @@
1010
@add="handleWidgetAdd"
1111
>
1212
<template v-for="(item, index) in pageData.list">
13-
<div
14-
class="widget-view"
15-
v-if="item && item.key"
16-
:key="item.key"
17-
:class="{active: selectWg.key === item.key,'widget-view-imgshow':item.type === 'imgshow','widget-view-button':item.type === 'button'}"
18-
@click="handleSelectWidget(index)"
19-
>
20-
<div v-if="item.type === 'phone'" class="wg-phone">
21-
<div class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
22-
<div class="wg-title" v-show="item.showLabel">{{item.title}}</div>
23-
<div class="flex-auto">
24-
<input class="wg-input" v-model="item.value" :placeholder="item.placeholder">
25-
</div>
26-
</div>
27-
<div class="flex" v-if="item.showCode">
28-
<input placeholder="验证码" class="wg-input flex-auto">
29-
<button class="getVerCode-btn">获取验证码</button>
30-
</div>
31-
</div>
32-
33-
<div v-if="item.type === 'input'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
34-
<div class="wg-title" v-show="item.showLabel">{{item.title}}</div>
35-
<div class="flex-auto">
36-
<input v-model="item.value" :placeholder="item.placeholder" class="wg-input">
37-
</div>
38-
</div>
39-
40-
<div v-if="item.type === 'checkbox'" class="wg-item flex-wrap wg-checkbox" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
41-
<div class="wg-title">{{item.title}}</div>
42-
<div class="flex-auto">
43-
<label class="label" v-for="(optionsItem, key) in item.options" :key="optionsItem + key">
44-
<input class="wg-checkbox-input" :type="item.isRadio?'radio':'checkbox'" :value="optionsItem" v-model="item.value" style="display:none">
45-
<span>{{optionsItem}}</span>
46-
</label>
47-
</div>
48-
</div>
49-
50-
<div v-if="item.type === 'select'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
51-
<div class="wg-title" v-show="item.showLabel">{{item.title}}</div>
52-
<div class="flex-auto">
53-
<select v-model="item.value" class="wg-select flex-auto">
54-
<option value disabled selected hidden>{{item.placeholder}}</option>
55-
<option v-for="item in item.options" :key="item" :value="item" :label="item.showLabel?item.label:item"></option>
56-
</select>
57-
</div>
58-
</div>
59-
60-
<div v-if="item.type==='switch'" class="wg-item wg-switch" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
61-
<div class="wg-title">{{item.title}}</div>
62-
<label class="label">
63-
<input type="checkbox" class="wg-switch-input" v-model="item.value" style="display:none">
64-
<span class="wg-switch-core"></span>
65-
</label>
66-
</div>
67-
68-
<div v-if="item.type === 'date'" class="wg-item" :class="[item.labelPosition==='top'?'flex-column':'align-middle']">
69-
<div class="wg-title">{{item.title}}</div>
70-
<div class="flex-auto">
71-
<input type="date" v-model="item.value" class="wg-input flex-auto">
72-
</div>
73-
</div>
74-
75-
<div class="flex flex-center" v-if="item.type === 'imgshow'">
76-
<img v-if="item.value" :src="item.value" alt="图片展示" width="100%">
77-
<img v-else src="@/assets/img/img-placeholder.png" alt="图片展示">
78-
</div>
79-
80-
<div class="flex flex-center" v-if="item.type === 'button'">
81-
<button class="wg-button">{{item.btnText}}</button>
82-
</div>
83-
84-
<div v-if="item.type === 'staticText'" class="wg-staticText">
85-
<p class="text" :style="{textAlign:item.textAlign}">{{item.value}}</p>
86-
</div>
87-
88-
<el-button
89-
title="删除"
90-
@click.stop="handleWidgetDelete(index)"
91-
class="widget-action-delete"
92-
v-if="selectWg.key === item.key"
93-
circle
94-
plain
95-
type="danger"
96-
>删除</el-button>
97-
<el-button
98-
title="复制"
99-
@click.stop="handleWidgetClone(index)"
100-
class="widget-action-clone"
101-
v-if="selectWg.key === item.key"
102-
circle
103-
plain
104-
type="primary"
105-
>复制</el-button>
106-
</div>
13+
<widget-form-item v-if="item && item.key" :key="item.key" :item="item" :index="index"/>
10714
</template>
10815
</draggable>
10916
</el-form>
@@ -113,10 +20,12 @@
11320
<script>
11421
import { mapState } from 'vuex';
11522
import Draggable from 'vuedraggable'
23+
import WidgetFormItem from './widget-form-item'
11624
11725
export default {
11826
components: {
119-
Draggable
27+
Draggable,
28+
WidgetFormItem
12029
},
12130
data() {
12231
return {

0 commit comments

Comments
 (0)