Skip to content

Commit f23cb11

Browse files
vincentzycvincentzyc
committed
init
1 parent 956205a commit f23cb11

9 files changed

Lines changed: 274 additions & 124 deletions

File tree

‎package.json‎

Lines changed: 55 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,56 @@
11
{
2-
"name": "form-design",
3-
"version": "0.1.0",
4-
"private": true,
5-
"scripts": {
6-
"serve": "vue-cli-service serve",
7-
"build": "vue-cli-service build",
8-
"lint": "vue-cli-service lint"
9-
},
10-
"dependencies": {
11-
"crypto-js": "^3.1.9-1",
12-
"element-ui": "^2.4.5",
13-
"vue": "^2.5.17",
14-
"vue-router": "^3.0.1"
15-
},
16-
"devDependencies": {
17-
"@vue/cli-plugin-babel": "^3.2.0",
18-
"@vue/cli-plugin-eslint": "^3.2.0",
19-
"@vue/cli-service": "^3.2.0",
20-
"babel-eslint": "^10.0.1",
21-
"babel-plugin-component": "^1.1.1",
22-
"eslint": "^5.8.0",
23-
"eslint-plugin-vue": "^5.0.0-0",
24-
"vue-cli-plugin-element": "^1.0.0",
25-
"vue-template-compiler": "^2.5.17"
26-
},
27-
"eslintConfig": {
28-
"root": true,
29-
"env": {
30-
"node": true
31-
},
32-
"extends": [
33-
"plugin:vue/essential",
34-
"eslint:recommended"
35-
],
36-
"rules": {
37-
"no-console": "off"
38-
},
39-
"parserOptions": {
40-
"parser": "babel-eslint"
41-
}
42-
},
43-
"postcss": {
44-
"plugins": {
45-
"autoprefixer": {}
46-
}
47-
},
48-
"browserslist": [
49-
"> 1%",
50-
"last 2 versions",
51-
"not ie <= 8"
52-
]
53-
}
2+
"name": "form-design",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"crypto-js": "^3.1.9-1",
12+
"element-ui": "^2.4.5",
13+
"vue": "^2.5.17",
14+
"vue-router": "^3.0.1",
15+
"vuedraggable": "^2.17.0"
16+
},
17+
"devDependencies": {
18+
"@vue/cli-plugin-babel": "^3.2.0",
19+
"@vue/cli-plugin-eslint": "^3.2.0",
20+
"@vue/cli-service": "^3.2.0",
21+
"babel-eslint": "^10.0.1",
22+
"babel-plugin-component": "^1.1.1",
23+
"eslint": "^5.8.0",
24+
"eslint-plugin-vue": "^5.0.0-0",
25+
"node-sass": "^4.11.0",
26+
"sass-loader": "^7.1.0",
27+
"vue-cli-plugin-element": "^1.0.0",
28+
"vue-template-compiler": "^2.5.17"
29+
},
30+
"eslintConfig": {
31+
"root": true,
32+
"env": {
33+
"node": true
34+
},
35+
"extends": [
36+
"plugin:vue/essential",
37+
"eslint:recommended"
38+
],
39+
"rules": {
40+
"no-console": "off"
41+
},
42+
"parserOptions": {
43+
"parser": "babel-eslint"
44+
}
45+
},
46+
"postcss": {
47+
"plugins": {
48+
"autoprefixer": {}
49+
}
50+
},
51+
"browserslist": [
52+
"> 1%",
53+
"last 2 versions",
54+
"not ie <= 8"
55+
]
56+
}

‎src/App.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,7 @@ export default {
1111
name: "app"
1212
};
1313
</script>
14+
<style lang="scss" scoped>
15+
@import "./assets/css/main.scss";
16+
</style>
17+

‎src/assets/css/main.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.page-container {
2+
height: 100%;
3+
width: 100%;
4+
.ghost {
5+
position: relative;
6+
margin: 0;
7+
width: 100%;
8+
background: #fff;
9+
border: 1px dashed #409eff;
10+
}
11+
.ghost::after {
12+
content: "";
13+
display: block;
14+
background: #fff;
15+
position: absolute;
16+
top: 0;
17+
left: 0;
18+
right: 0;
19+
bottom: 0;
20+
}
21+
.input-text, .input-select {
22+
width: 100%;
23+
padding: 15px 0;
24+
color: #666;
25+
font-size: 14px;
26+
margin-bottom: 20px;
27+
border-radius: 4px;
28+
border: 1px solid #ddd;
29+
text-indent: 10px;
30+
background: #fff;
31+
}
32+
}

‎src/assets/json/widget-form.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
[{
2+
"type": "input",
3+
"name": "输入框",
4+
"config": {
5+
"defaultValue": "",
6+
"required": false,
7+
"placeholder": ""
8+
}
9+
},
10+
{
11+
"type": "select",
12+
"name": "下拉选择框",
13+
"config": {
14+
"defaultValue": "",
15+
"required": false,
16+
"placeholder": "",
17+
"options": [{
18+
"value": "选项1"
19+
}, {
20+
"value": "选项2"
21+
}, {
22+
"value": "选项3"
23+
}]
24+
}
25+
}
26+
]

‎src/components/design-form.vue‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,46 @@
11
<template>
2-
<div class="container">设计表单</div>
2+
<draggable class="page-container" v-model="pageItems" :options="{group:'people', ghostClass: 'ghost'}" @end="handleMoveEnd" @add="handleWidgetAdd">
3+
<template v-for="(widget, index) in pageItems">
4+
<div class="design-form-label relative" :key="index">
5+
<template v-if="widget.type === 'input'">
6+
<input type="text" v-model="dataModel" :placeholder="widget.config.placeholder">
7+
</template>
8+
</div>
9+
</template>
10+
</draggable>
311
</template>
412

513
<script>
6-
export default {
14+
import Draggable from 'vuedraggable'
715
8-
};
9-
</script>
16+
export default {
17+
components: {
18+
Draggable
19+
},
20+
props: ['data', 'select'],
21+
data() {
22+
return {
23+
pageItems: [],
24+
selectWidget: this.select
25+
}
26+
},
27+
methods: {
28+
handleMoveEnd({ newIndex, oldIndex }) {
29+
console.log('index', newIndex, oldIndex)
30+
},
31+
handleSelectWidget(index) {
32+
console.log(index, '#####')
33+
this.selectWidget = this.data.list[index]
34+
},
35+
handleWidgetAdd(evt) {
36+
console.log('add', evt)
37+
console.log('end', evt)
38+
const newIndex = evt.newIndex
39+
const to = evt.to
40+
console.log(to)
41+
},
1042
11-
<style>
12-
.container {
43+
}
1344
}
14-
</style>
15-
16-
45+
</script>
1746

‎src/components/widget-form.vue‎

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,70 @@
11
<template>
2-
<el-menu
3-
:default-active="onRoutes"
4-
class="sidebar-menu"
5-
unique-opened
6-
router
7-
background-color="#324157"
8-
text-color="#bbc9da"
9-
active-text-color="#20a0ff"
10-
>
11-
<template v-for="item in items">
12-
<template v-if="item.subs">
13-
<el-submenu :index="item.index" :key="item.index">
14-
<template slot="title">
15-
<i :class="item.icon"></i>
16-
{{ item.title }}
17-
</template>
18-
<el-menu-item
19-
v-for="(subItem,i) in item.subs"
20-
:key="i"
21-
:index="subItem.index"
22-
>{{ subItem.title }}</el-menu-item>
23-
</el-submenu>
24-
</template>
25-
<template v-else>
26-
<el-menu-item :index="item.index" :key="item.index">
27-
<i :class="item.icon"></i>
28-
{{ item.title }}
29-
</el-menu-item>
30-
</template>
31-
</template>
32-
</el-menu>
2+
<div class="widget-form-container">
3+
<draggable
4+
element="ul"
5+
:list="basicComponents"
6+
:options="{group:{ name:'people', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"
7+
@end="handleMoveEnd"
8+
@start="handleMoveStart"
9+
:move="handleMove"
10+
>
11+
<li class="widget-form-label" v-for="(item, index) in basicComponents" :key="index">
12+
<span>{{item.name}}</span>
13+
</li>
14+
</draggable>
15+
</div>
3316
</template>
3417

3518
<script>
36-
import crmMenus from "@/assets/json/sidebar.json";
19+
import widgetForm from "@/assets/json/widget-form.json";
20+
import Draggable from 'vuedraggable'
3721
export default {
22+
components: {
23+
Draggable
24+
},
3825
data() {
3926
return {
40-
items: crmMenus
27+
basicComponents: widgetForm
4128
};
4229
},
43-
computed: {
44-
onRoutes() {
45-
return "/" + this.$route.path.split("/")[1];
30+
methods: {
31+
handleMoveEnd(evt) {
32+
console.log('end', evt)
33+
},
34+
handleMoveStart({ oldIndex }) {
35+
console.log('start', oldIndex, this.basicComponents)
36+
},
37+
handleMove() {
38+
return true
4639
}
4740
}
4841
};
4942
</script>
5043

5144
<style scoped>
52-
.sidebar-menu {
53-
height: 100%;
54-
overflow-y: auto;
45+
.widget-form-container {
46+
padding: 10px;
47+
overflow: hidden;
48+
}
49+
.widget-form-label {
50+
position: relative;
51+
display: block;
52+
float: left;
53+
width: 46%;
54+
margin: 2%;
55+
line-height: 36px;
56+
font-size: 12px;
57+
overflow: hidden;
58+
text-overflow: ellipsis;
59+
white-space: nowrap;
60+
color: #333;
61+
cursor: move;
62+
background: #f4f6fc;
63+
border: 1px solid #f4f6fc;
64+
}
65+
.widget-form-label:hover {
66+
color: #409eff;
67+
border: 1px dashed #409eff;
5568
}
5669
</style>
5770

‎src/router.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,17 @@ const router = new Router({
2121
path: "/home",
2222
name: 'home',
2323
component: () => import('@/views/home.vue')
24-
},
24+
},
25+
{
26+
path: '/preview',
27+
name: 'preview',
28+
component: () => import("@/views/preview.vue")
29+
},
2530
{
2631
path: '*',
2732
name: '404',
2833
component: () => import("@/views/404.vue")
29-
}
34+
}
3035
]
3136
})
3237

0 commit comments

Comments
 (0)