Skip to content

Commit c1797d0

Browse files
vincentzycvincentzyc
committed
项目结构优化
1 parent ba64496 commit c1797d0

File tree

14 files changed

+414
-237
lines changed

14 files changed

+414
-237
lines changed

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

Lines changed: 0 additions & 237 deletions
This file was deleted.

‎src/components/widget-form-list/index.vue‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<template>
2+
<draggable
3+
v-model="pageData[list]"
4+
:options="{group:'widget', ghostClass: 'ghost',swapThreshold:0.5,animation: 100}"
5+
@add="handleWidgetAdd"
6+
class="widget-form-list"
7+
:class="{'widget-empty': pageData[list].length === 0}"
8+
>
9+
<template v-for="(item, index) in pageData[list]">
10+
<div class="widget-view" :key="item.key" :class="{active: selectWg.key === item.key}" @click="handleSelectWidget(index)">
11+
<!-- 手机 -->
12+
<WgPhone :item="item"/>
13+
14+
<!-- 输入框 -->
15+
<WgInput :item="item"/>
16+
17+
<!-- 选择框 -->
18+
<WgCheckbox :item="item"/>
19+
20+
<!-- 下拉选择 -->
21+
<WgSelect :item="item"/>
22+
23+
<!-- 开关 -->
24+
<WgSwitch :item="item"/>
25+
26+
<!-- 日期选择 -->
27+
<WgDate :item="item"/>
28+
29+
<!-- 图片展示 -->
30+
<WgImgshow :item="item"/>
31+
32+
<!-- 图片轮播 -->
33+
<WgImgslide :item="item"/>
34+
35+
<!-- 按钮 -->
36+
<WgButton :item="item"/>
37+
38+
<!-- 文本描述 -->
39+
<WgStaticText :item="item"/>
40+
41+
<!-- 分割线 -->
42+
<WgSplitLine :item="item"/>
43+
44+
<!-- 横向滑动自动选择 -->
45+
<WgHpicker :item="item"/>
46+
47+
<el-button
48+
title="删除"
49+
@click="handleWidgetDelete(index)"
50+
class="widget-action-delete"
51+
v-if="selectWg.key === item.key"
52+
circle
53+
plain
54+
type="danger"
55+
>删除</el-button>
56+
<el-button
57+
title="复制"
58+
@click="handleWidgetClone(index)"
59+
class="widget-action-clone"
60+
v-if="selectWg.key === item.key"
61+
circle
62+
plain
63+
type="primary"
64+
>复制</el-button>
65+
</div>
66+
</template>
67+
</draggable>
68+
</template>
69+
70+
<script>
71+
import { mapState } from 'vuex';
72+
import Draggable from 'vuedraggable'
73+
import WgPhone from './wg-phone'
74+
import WgInput from './wg-input'
75+
import WgCheckbox from './wg-checkbox'
76+
import WgSelect from './wg-select'
77+
import WgSwitch from './wg-switch'
78+
import WgDate from './wg-date'
79+
import WgImgshow from './wg-imgshow'
80+
import WgImgslide from './wg-imgslide'
81+
import WgButton from './wg-button'
82+
import WgStaticText from './wg-statictext'
83+
import WgSplitLine from './wg-splitLine'
84+
import WgHpicker from './wg-hpicker'
85+
86+
export default {
87+
components: {
88+
Draggable,
89+
WgPhone,
90+
WgInput,
91+
WgCheckbox,
92+
WgSelect,
93+
WgSwitch,
94+
WgDate,
95+
WgImgshow,
96+
WgImgslide,
97+
WgButton,
98+
WgStaticText,
99+
WgSplitLine,
100+
WgHpicker
101+
},
102+
props: {
103+
list: String
104+
},
105+
data() {
106+
return {
107+
}
108+
},
109+
computed: {
110+
...mapState({
111+
selectWg: state => state.common.selectWg,
112+
pageData: state => state.common.pageData
113+
})
114+
},
115+
methods: {
116+
handleWidgetAdd(evt) {
117+
const newIndex = evt.newIndex;
118+
119+
const elKey = Date.now() + '_' + Math.ceil(Math.random() * 1000000);
120+
let newObj = this.$util.deepClone(this.pageData[this.list][newIndex]);
121+
122+
newObj.key = this.pageData[this.list][newIndex].type + '_' + elKey;
123+
this.$set(this.pageData[this.list], newIndex, newObj);
124+
this.$store.commit('setSelectWg', this.pageData[this.list][newIndex]);
125+
this.$store.commit('setConfigTab', "widget");
126+
},
127+
handleSelectWidget(index) {
128+
this.$store.commit('setSelectWg', this.pageData[this.list][index]);
129+
this.$store.commit('setConfigTab', "widget");
130+
},
131+
handleWidgetDelete(index) {
132+
if (this.pageData[this.list].length - 1 === index) {
133+
if (index === 0) {
134+
this.$store.commit('setSelectWg', {})
135+
} else {
136+
this.$store.commit('setSelectWg', this.pageData[this.list][index - 1])
137+
}
138+
} else {
139+
this.$store.commit('setSelectWg', this.pageData[this.list][index + 1])
140+
}
141+
this.$nextTick(() => {
142+
this.pageData[this.list].splice(index, 1)
143+
})
144+
},
145+
handleWidgetClone(index) {
146+
let cloneData = this.$util.deepClone(this.pageData[this.list][index]);
147+
cloneData.key = this.pageData[this.list][index].type + '_' + Date.now() + '_' + Math.ceil(Math.random() * 1000000)
148+
this.pageData[this.list].splice(index, 0, cloneData)
149+
this.$nextTick(() => {
150+
this.$store.commit('setSelectWg', this.pageData[this.list][index + 1])
151+
})
152+
},
153+
}
154+
}
155+
</script>

0 commit comments

Comments
 (0)