Skip to content

Commit 4feca5e

Browse files
vincentzycvincentzyc
committed
init
1 parent 7754336 commit 4feca5e

File tree

14 files changed

+179
-119
lines changed

14 files changed

+179
-119
lines changed

‎.browserslistrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not ie <= 8

‎.eslintrc.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/essential',
8+
'eslint:recommended'
9+
],
10+
rules: {
11+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13+
},
14+
parserOptions: {
15+
parser: 'babel-eslint'
16+
}
17+
}

‎package.json‎

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"element-ui": "^2.4.5",
1313
"vue": "^2.5.17",
1414
"vue-router": "^3.0.1",
15-
"vuedraggable": "^2.17.0"
15+
"vuedraggable": "^2.17.0",
16+
"vuex": "^3.0.1"
1617
},
1718
"devDependencies": {
1819
"@vue/cli-plugin-babel": "^3.2.0",
@@ -26,31 +27,5 @@
2627
"sass-loader": "^7.1.0",
2728
"vue-cli-plugin-element": "^1.0.0",
2829
"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-
]
30+
}
5631
}

‎postcss.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {}
4+
}
5+
}

‎src/assets/js/api.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Vue from "vue";
21
import Crypto from "./crypto";
32

43
export default {
@@ -7,7 +6,6 @@ export default {
76
Vue.prototype.$api = this;
87
}
98
},
10-
vue: new Vue(),
119
env() {
1210
if (process.env.NODE_ENV === "development") return "development";
1311
if (window.location.href.includes("192.168")) return "test";

src/components/FormConfig.vue renamed to src/components/PageConfig.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,27 @@
22
<div class="form-config-container">
33
<el-form label-position="top">
44
<el-form-item label="标签对齐方式">
5-
<el-radio-group v-model="data.labelPosition">
5+
<el-radio-group v-model="config.labelPosition">
66
<el-radio-button label="left">左对齐</el-radio-button>
77
<el-radio-button label="right">右对齐</el-radio-button>
88
<el-radio-button label="top">顶部对齐</el-radio-button>
99
</el-radio-group>
1010
</el-form-item>
1111

1212
<el-form-item label="表单字段宽度">
13-
<el-input-number v-model="data.labelWidth" :min="0" :max="200" :step="10"></el-input-number>
13+
<el-input-number v-model="config.labelWidth" :min="0" :max="200" :step="10"></el-input-number>
1414
</el-form-item>
1515
</el-form>
1616
</div>
1717
</template>
1818

1919
<script>
20+
import { mapState } from "vuex";
2021
export default {
21-
props: ['data']
22+
computed: {
23+
...mapState({
24+
config: state => state.common.pageData.config
25+
})
26+
},
2227
}
2328
</script>

‎src/components/WidgetConfig.vue‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<template>
2-
<div v-if="this.selectItem && Object.keys(this.selectItem).length > 0">
2+
<div v-if="this.selectWg && Object.keys(this.selectWg).length > 0">
33
<el-form label-position="top">
4-
<el-form-item label="提示内容" v-if="Object.keys(selectItem.config).indexOf('placeholder')>=0">
5-
<el-input v-model="selectItem.config.placeholder"></el-input>
4+
<el-form-item label="提示内容" v-if="Object.keys(selectWg.config).indexOf('placeholder')>=0">
5+
<el-input v-model="selectWg.config.placeholder"></el-input>
66
</el-form-item>
7-
<el-form-item label="选择控件" v-if="selectItem.type=='input'">
8-
<el-select v-model="selectItem.config.apiKey" filterable placeholder="请选择" @change="selectInput">
9-
<el-option v-for="item in selectItem.config.inputTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
7+
<el-form-item label="选择控件" v-if="selectWg.type=='input'">
8+
<el-select v-model="selectWg.config.apiKey" filterable placeholder="请选择" @change="selectInput">
9+
<el-option v-for="item in selectWg.config.inputTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
1010
</el-select>
1111
</el-form-item>
12-
<el-form-item label="选项" v-if="Object.keys(selectItem.config).indexOf('options')>=0">
13-
<template v-if="selectItem.type=='radio' || (selectItem.type=='select'&&!selectItem.config.multiple)">
14-
<draggable element="ul" :list="selectItem.config.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.move-icon'}">
15-
<li v-for="(item, index) in selectItem.config.options" :key="index">
12+
<el-form-item label="选项" v-if="Object.keys(selectWg.config).indexOf('options')>=0">
13+
<template v-if="selectWg.type=='radio' || (selectWg.type=='select'&&!selectWg.config.multiple)">
14+
<draggable element="ul" :list="selectWg.config.options" :options="{group:'options', ghostClass: 'ghost',handle: '.move-icon'}">
15+
<li v-for="(item, index) in selectWg.config.options" :key="index">
1616
<div class="flex align-middle">
17-
<el-input :style="{'width': selectItem.config.showLabel? '90px': '190px' }" size="mini" v-model="item.value"></el-input>
17+
<el-input :style="{'width': selectWg.config.showLabel? '90px': '190px' }" size="mini" v-model="item.value"></el-input>
1818
<i class="el-icon-menu move-icon"></i>
1919
<i class="el-icon-delete delect-icon" @click="handleOptionsRemove(index)"></i>
2020
</div>
2121
</li>
2222
</draggable>
2323
</template>
2424

25-
<template v-if="selectItem.type=='checkbox' || (selectItem.type=='select' && selectItem.config.multiple)">
26-
<draggable element="ul" :list="selectItem.config.options" :options="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.move-icon'}">
27-
<li v-for="(item, index) in selectItem.config.options" :key="index">
25+
<template v-if="selectWg.type=='checkbox' || (selectWg.type=='select' && selectWg.config.multiple)">
26+
<draggable element="ul" :list="selectWg.config.options" :options="{group:'options', ghostClass: 'ghost',handle: '.move-icon'}">
27+
<li v-for="(item, index) in selectWg.config.options" :key="index">
2828
<div class="flex align-middle">
29-
<el-input :style="{'width': selectItem.config.showLabel? '90px': '190px' }" size="mini" v-model="item.value"></el-input>
29+
<el-input :style="{'width': selectWg.config.showLabel? '90px': '190px' }" size="mini" v-model="item.value"></el-input>
3030
<i class="el-icon-menu move-icon"></i>
3131
<i class="el-icon-delete delect-icon" @click="handleOptionsRemove(index)"></i>
3232
</div>
@@ -38,20 +38,20 @@
3838
</div>
3939
</el-form-item>
4040

41-
<template v-if="selectItem.type === 'imgshow'">
42-
<el-form-item label="图片上传">
41+
<el-form-item label="图片上传">
42+
<template v-if="selectWg.type === 'imgshow'">
4343
<el-upload
4444
class="avatar-uploader"
4545
action="https://jsonplaceholder.typicode.com/posts/"
4646
:show-file-list="false"
4747
:on-success="handleAvatarSuccess"
4848
:before-upload="beforeAvatarUpload"
4949
>
50-
<img v-if="selectItem.config.defaultValue" :src="selectItem.config.defaultValue" class="avatar">
50+
<img v-if="selectWg.config.defaultValue" :src="selectWg.config.defaultValue" class="avatar">
5151
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
5252
</el-upload>
53-
</el-form-item>
54-
</template>
53+
</template>
54+
</el-form-item>
5555
</el-form>
5656
</div>
5757
</template>
@@ -63,17 +63,19 @@ export default {
6363
components: {
6464
Draggable
6565
},
66-
props: ['selectItem'],
66+
props: {
67+
selectWg: Object
68+
},
6769
data() {
6870
return {}
6971
},
7072
methods: {
7173
selectInput(val) {
72-
let selectItem = this.selectItem.config.inputTypes.find(item => val === item.value);
73-
this.selectItem.config.placeholder = `请输入${selectItem.label}`
74+
let selectWg = this.selectWg.config.inputTypes.find(item => val === item.value);
75+
this.selectWg.config.placeholder = `请输入${selectWg.label}`
7476
},
7577
handleAvatarSuccess(res, file) {
76-
this.selectItem.config.defaultValue = URL.createObjectURL(file.raw);
78+
this.selectWg.config.defaultValue = URL.createObjectURL(file.raw);
7779
},
7880
beforeAvatarUpload(file) {
7981
const isLt2M = file.size / 1024 / 1024 < 2;
@@ -83,21 +85,21 @@ export default {
8385
return isLt2M;
8486
},
8587
handleOptionsRemove(index) {
86-
if (this.selectItem.type === 'grid') {
87-
this.selectItem.columns.splice(index, 1)
88+
if (this.selectWg.type === 'grid') {
89+
this.selectWg.columns.splice(index, 1)
8890
} else {
89-
this.selectItem.config.options.splice(index, 1)
91+
this.selectWg.config.options.splice(index, 1)
9092
}
9193
9294
},
9395
handleAddOption() {
94-
if (this.selectItem.config.showLabel) {
95-
this.selectItem.config.options.push({
96+
if (this.selectWg.config.showLabel) {
97+
this.selectWg.config.options.push({
9698
value: '新选项',
9799
label: '新选项'
98100
})
99101
} else {
100-
this.selectItem.config.options.push({
102+
this.selectWg.config.options.push({
101103
value: '新选项'
102104
})
103105
}

‎src/components/WidgetForm.vue‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
<template>
22
<div class="widget-form-container">
3-
<el-form :label-position="data.config.labelPosition" :label-width="data.config.labelWidth + 'px'" style="height:100%">
3+
<el-form :label-position="pageData.config.labelPosition" :label-width="pageData.config.labelWidth + 'px'" style="height:100%">
44
<draggable
55
class="widget-form-list"
6-
:class="{'widget-empty': data.list.length == 0}"
7-
v-model="data.list"
8-
:options="{group:'people', ghostClass: 'ghost'}"
9-
@end="handleMoveEnd"
6+
:class="{'widget-empty': pageData.list.length == 0}"
7+
v-model="pageData.list"
8+
:options="{group:'widget', ghostClass: 'ghost'}"
109
@add="handleWidgetAdd"
1110
>
12-
<template v-for="(element, index) in data.list">
13-
<widget-form-item v-if="element && element.key" :key="element.key" :element="element" :select.sync="selectWidget" :index="index" :data="data"></widget-form-item>
11+
<template v-for="(element, index) in pageData.list">
12+
<widget-form-item
13+
v-if="element && element.key"
14+
:key="element.key"
15+
:element="element"
16+
:selectWg.sync="selectWidget"
17+
:index="index"
18+
:pageData="pageData"
19+
></widget-form-item>
1420
</template>
1521
</draggable>
1622
</el-form>
1723
</div>
1824
</template>
1925

2026
<script>
27+
import { mapState } from "vuex";
2128
import Draggable from 'vuedraggable'
2229
import WidgetFormItem from './WidgetFormItem'
2330
@@ -26,17 +33,21 @@ export default {
2633
Draggable,
2734
WidgetFormItem
2835
},
29-
props: ['data', 'select'],
3036
data() {
3137
return {
3238
selectWidget: this.select
3339
}
3440
},
41+
computed: {
42+
...mapState({
43+
pageData: state => state.common.pageData,
44+
selectWg: state => state.common.selectWg
45+
})
46+
},
47+
3548
methods: {
36-
handleMoveEnd({ newIndex, oldIndex }) {
37-
console.log('index', newIndex, oldIndex)
38-
},
3949
handleWidgetAdd(evt) {
50+
// this.$store.commit("GET_SOUND_ROW", row);
4051
console.log('add', evt)
4152
console.log('end', evt)
4253
const newIndex = evt.newIndex

‎src/components/WidgetFormItem.vue‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -88,39 +88,42 @@
8888

8989
<script>
9090
export default {
91-
props: ['element', 'select', 'index', 'data'],
91+
props: ['element', 'selectWg', 'index', 'pageData'],
92+
// props:{
93+
// index:Number
94+
// },
9295
data() {
9396
return {
94-
selectWidget: this.select
97+
selectWidget: this.selectWg
9598
}
9699
},
97100
methods: {
98101
handleSelectWidget(index) {
99-
this.selectWidget = this.data.list[index]
102+
this.selectWidget = this.pageData.list[index]
100103
},
101104
handleWidgetDelete(index) {
102-
if (this.data.list.length - 1 === index) {
105+
if (this.pageData.list.length - 1 === index) {
103106
if (index === 0) {
104107
this.selectWidget = {}
105108
} else {
106-
this.selectWidget = this.data.list[index - 1]
109+
this.selectWidget = this.pageData.list[index - 1]
107110
}
108111
} else {
109-
this.selectWidget = this.data.list[index + 1]
112+
this.selectWidget = this.pageData.list[index + 1]
110113
}
111114
112115
this.$nextTick(() => {
113-
this.data.list.splice(index, 1)
116+
this.pageData.list.splice(index, 1)
114117
})
115118
},
116119
handleWidgetClone(index) {
117120
let cloneData = {
118-
...this.data.list[index],
119-
config: { ...this.data.list[index].config },
121+
...this.pageData.list[index],
122+
config: { ...this.pageData.list[index].config },
120123
key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
121124
}
122125
123-
if (this.data.list[index].type === 'radio' || this.data.list[index].type === 'checkbox') {
126+
if (this.pageData.list[index].type === 'radio' || this.pageData.list[index].type === 'checkbox') {
124127
125128
cloneData = {
126129
...cloneData,
@@ -131,20 +134,20 @@ export default {
131134
}
132135
}
133136
134-
this.data.list.splice(index, 0, cloneData)
137+
this.pageData.list.splice(index, 0, cloneData)
135138
136139
this.$nextTick(() => {
137-
this.selectWidget = this.data.list[index + 1]
140+
this.selectWidget = this.pageData.list[index + 1]
138141
})
139142
},
140143
},
141144
watch: {
142-
select(val) {
145+
selectWg(val) {
143146
this.selectWidget = val
144147
},
145148
selectWidget: {
146149
handler(val) {
147-
this.$emit('update:select', val)
150+
this.$emit('update:selectWg', val)
148151
},
149152
deep: true
150153
}

‎src/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import '@/assets/css/base.css'
55
import Api from './assets/js/api';
66
import BaseComponents from "./components/base";
77
import router from './router'
8+
import store from './store'
89

910
Vue.config.productionTip = false
1011

@@ -13,5 +14,6 @@ Vue.use(Api)
1314

1415
new Vue({
1516
router,
17+
store,
1618
render: h => h(App)
1719
}).$mount('#app')

0 commit comments

Comments
 (0)