Skip to content

Commit 854cc3c

Browse files
BoBooooooBoBoooooo
committed
formDesigner项目源码整合到项目中,去掉不需要的代码。
下一步调整源码
1 parent d631019 commit 854cc3c

18 files changed

+2365
-89
lines changed

‎package.json

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
"element-ui": "2.4.6",
2020
"extract-text-webpack-plugin": "^4.0.0-beta.0",
2121
"font-awesome": "4.7.0",
22-
"form-making": "1.1.3",
2322
"http-proxy-middleware": "^0.17.3",
2423
"js-cookie": "2.2.0",
2524
"mini-css-extract-plugin": "^0.4.1",
@@ -29,7 +28,17 @@
2928
"vue": "2.5.17",
3029
"vue-multiselect": "^2.0.8",
3130
"vue-router": "3.0.1",
32-
"vuex": "3.0.1"
31+
"vuex": "3.0.1",
32+
"ace": "1.3.0",
33+
"clipboard": "^2.0.1",
34+
"jsoneditor": "5.25.0",
35+
"multiparty": "4.2.1",
36+
"tinymce": "4.8.5",
37+
"tui-color-picker": "^2.2.0",
38+
"tui-editor": "1.2.6",
39+
"viewerjs": "1.3.0",
40+
"vue-awesome": "3.2.0",
41+
"vuedraggable": "2.16.0"
3342
},
3443
"devDependencies": {
3544
"autoprefixer": "8.5.0",

‎src/components/FormDesigner/Container.vue

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
<template>
2+
<el-container>
3+
<el-aside style="wdith: 250px;">
4+
5+
<div class="components-list">
6+
<div class="widget-cate">基础字段</div>
7+
<draggable element="ul" :list="basicComponents"
8+
:options="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
9+
@end="handleMoveEnd"
10+
@start="handleMoveStart"
11+
:move="handleMove"
12+
>
13+
14+
<li class="form-edit-widget-label" v-for="(item, index) in basicComponents" :key="index">
15+
<a>
16+
<icon class="icon" :name="item.icon"></icon>
17+
<span>{{item.name}}</span>
18+
</a>
19+
</li>
20+
</draggable>
21+
22+
<div class="widget-cate">高级字段</div>
23+
<draggable element="ul" :list="advanceComponents"
24+
:options="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
25+
@end="handleMoveEnd"
26+
@start="handleMoveStart"
27+
:move="handleMove"
28+
>
29+
30+
<li class="form-edit-widget-label" v-for="(item, index) in advanceComponents" :key="index">
31+
<a>
32+
<icon class="icon" :name="item.icon"></icon>
33+
<span>{{item.name}}</span>
34+
</a>
35+
</li>
36+
</draggable>
37+
38+
<div class="widget-cate">布局字段</div>
39+
<draggable element="ul" :list="layoutComponents"
40+
:options="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
41+
@end="handleMoveEnd"
42+
@start="handleMoveStart"
43+
:move="handleMove"
44+
>
45+
46+
<li class="form-edit-widget-label data-grid" v-for="(item, index) in layoutComponents" :key="index">
47+
<a>
48+
<icon class="icon" :name="item.icon"></icon>
49+
<span>{{item.name}}</span>
50+
</a>
51+
</li>
52+
</draggable>
53+
</div>
54+
55+
</el-aside>
56+
<el-container class="center-container" direction="vertical">
57+
<el-header class="btn-bar" style="height: 45px;">
58+
<!-- <el-button type="text" size="medium" @click="handleGoGithub">GitHub</el-button> -->
59+
<el-button type="text" size="medium" icon="el-icon-view" @click="handlePreview">预览</el-button>
60+
<el-button type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
61+
<el-button type="text" size="medium" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
62+
</el-header>
63+
<el-main :class="{'widget-empty': widgetForm.list.length == 0}">
64+
65+
<widget-form ref="widgetForm" :data="widgetForm" :select.sync="widgetFormSelect"></widget-form>
66+
</el-main>
67+
</el-container>
68+
69+
<el-aside class="widget-config-container">
70+
<el-container>
71+
<el-header height="45px">
72+
<div class="config-tab" :class="{active: configTab=='widget'}" @click="handleConfigSelect('widget')">字段属性</div>
73+
<div class="config-tab" :class="{active: configTab=='form'}" @click="handleConfigSelect('form')">表单属性</div>
74+
</el-header>
75+
<el-main class="config-content">
76+
<widget-config v-show="configTab=='widget'" :data="widgetFormSelect"></widget-config>
77+
<form-config v-show="configTab=='form'" :data="widgetForm.config"></form-config>
78+
</el-main>
79+
</el-container>
80+
81+
</el-aside>
82+
83+
<cus-dialog
84+
:visible="previewVisible"
85+
@on-close="previewVisible = false"
86+
ref="widgetPreview"
87+
@on-submit="handleTest"
88+
width="1000px"
89+
form
90+
>
91+
<generate-form v-if="previewVisible" :data="widgetForm" :remote="remoteFuncs" :value="widgetModels" ref="generateForm">
92+
93+
<template slot="blank" slot-scope="scope">
94+
宽度：<el-input v-model="scope.model.blank.width" style="width: 100px"></el-input>
95+
高度：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
96+
</template>
97+
</generate-form>
98+
</cus-dialog>
99+
100+
<cus-dialog
101+
:visible="jsonVisible"
102+
@on-close="jsonVisible = false"
103+
ref="jsonPreview"
104+
width="800px"
105+
form
106+
>
107+
<div id="jsoneditor" style="height: 400px;width: 100%;">{{jsonTemplate}}</div>
108+
109+
<template slot="action">
110+
<el-button id="copybtn" data-clipboard-target=".ace_text-input">双击复制</el-button>
111+
</template>
112+
</cus-dialog>
113+
114+
<cus-dialog
115+
:visible="codeVisible"
116+
@on-close="codeVisible = false"
117+
ref="codePreview"
118+
width="800px"
119+
form
120+
:action="false"
121+
>
122+
<div id="codeeditor" style="height: 500px; width: 100%;">{{htmlTemplate}}</div>
123+
</cus-dialog>
124+
</el-container>
125+
</template>
126+
127+
<script>
128+
import Draggable from 'vuedraggable'
129+
import WidgetConfig from './WidgetConfig'
130+
import FormConfig from './FormConfig'
131+
import WidgetForm from './WidgetForm'
132+
import CusDialog from './CusDialog'
133+
import icon from 'vue-awesome/components/Icon'
134+
import 'vue-awesome/icons/regular/keyboard'
135+
import 'vue-awesome/icons/regular/trash-alt'
136+
import 'vue-awesome/icons/regular/clone'
137+
import 'vue-awesome/icons/regular/dot-circle'
138+
import 'vue-awesome/icons/regular/check-square'
139+
import 'vue-awesome/icons/bars'
140+
import 'vue-awesome/icons/regular/calendar-alt'
141+
import 'vue-awesome/icons/regular/clock'
142+
import 'vue-awesome/icons/th'
143+
import 'vue-awesome/icons/sort-numeric-up'
144+
import 'vue-awesome/icons/regular/star'
145+
import 'vue-awesome/icons/palette'
146+
import 'vue-awesome/icons/regular/caret-square-down'
147+
import 'vue-awesome/icons/toggle-off'
148+
import 'vue-awesome/icons/sliders-h'
149+
import 'vue-awesome/icons/regular/image'
150+
import 'vue-awesome/icons/chalkboard'
151+
import GenerateForm from './GenerateForm'
152+
// import JSONEditor from 'jsoneditor'
153+
// import 'jsoneditor/dist/jsoneditor.min.css'
154+
import Clipboard from 'clipboard'
155+
import {basicComponents, layoutComponents, advanceComponents} from './componentsConfig.js'
156+
157+
import generateCode from './generateCode.js'
158+
159+
export default {
160+
name: 'fm-making-form',
161+
components: {
162+
Draggable,
163+
WidgetConfig,
164+
FormConfig,
165+
WidgetForm,
166+
CusDialog,
167+
GenerateForm,
168+
icon
169+
},
170+
data () {
171+
return {
172+
basicComponents,
173+
layoutComponents,
174+
advanceComponents,
175+
widgetForm: {
176+
list: [],
177+
config: {
178+
labelWidth: 100,
179+
labelPosition: 'top'
180+
},
181+
},
182+
configTab: 'widget',
183+
widgetFormSelect: null,
184+
previewVisible: false,
185+
jsonVisible: false,
186+
codeVisible: false,
187+
remoteFuncs: {
188+
func_test (resolve) {
189+
setTimeout(() => {
190+
const options = [
191+
{id: '1', name: '1111'},
192+
{id: '2', name: '2222'},
193+
{id: '3', name: '3333'}
194+
]
195+
196+
resolve(options)
197+
}, 2000)
198+
},
199+
funcGetToken (resolve) {
200+
request.get('http://tools-server.xiaoyaoji.cn/api/uptoken').then(res => {
201+
resolve(res.uptoken)
202+
})
203+
}
204+
},
205+
widgetModels: {},
206+
blank: '',
207+
htmlTemplate: '',
208+
jsonTemplate: ''
209+
}
210+
},
211+
mounted () {
212+
// // loadCss('https://unpkg.com/jsoneditor/dist/jsoneditor.min.css')
213+
// // loadJs('https://unpkg.com/jsoneditor/dist/jsoneditor.min.js')
214+
// loadJs('lib/ace/src/ace.js')
215+
},
216+
methods: {
217+
218+
handleConfigSelect (value) {
219+
this.configTab = value
220+
},
221+
handleMoveEnd (evt) {
222+
console.log('end', evt)
223+
},
224+
handleMoveStart ({oldIndex}) {
225+
console.log('start', oldIndex, this.basicComponents)
226+
},
227+
handleMove () {
228+
return true
229+
},
230+
handlePreview () {
231+
this.previewVisible = true
232+
},
233+
handleTest () {
234+
this.$refs.generateForm.getData().then(data => {
235+
this.$alert(data, '').catch(e=>{})
236+
this.$refs.widgetPreview.end()
237+
}).catch(e => {
238+
this.$refs.widgetPreview.end()
239+
})
240+
},
241+
handleGenerateJson () {
242+
this.jsonVisible = true
243+
this.jsonTemplate = this.widgetForm
244+
this.$nextTick(() => {
245+
246+
// const editor = ace.edit('jsoneditor')
247+
// // editor.session.setMode("ace/mode/json")
248+
249+
const btnCopy = new Clipboard('#copybtn')
250+
})
251+
},
252+
handleGenerateCode () {
253+
this.codeVisible = true
254+
this.htmlTemplate = generateCode(JSON.stringify(this.widgetForm))
255+
this.$nextTick(() => {
256+
// const editor = ace.edit('codeeditor')
257+
// editor.session.setMode("ace/mode/html")
258+
})
259+
}
260+
},
261+
watch: {
262+
widgetForm: {
263+
deep: true,
264+
handler: function (val) {
265+
console.log(this.$refs.widgetForm)
266+
}
267+
}
268+
}
269+
}
270+
</script>
271+
272+
<style lang="scss">
273+
@import './styles/cover.scss';
274+
@import './styles/index.scss';
275+
276+
.widget-empty{
277+
background: url('./assets/form_empty.png') no-repeat;
278+
background-position: 50%;
279+
}
280+
281+
</style>

0 commit comments

Comments
 (0)