elink-star
/
tduck-front
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善表单功能

old
wangqing 5 years ago
parent
420d80ba35
commit
4a3e4ab9b1
6 changed files with 114 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      src/components/generator/config.js
  2. 2
      src/router/modules/root.js
  3. 44
      src/utils/formDataConvert.js
  4. 36
      src/views/form/index.vue
  5. 0
      src/views/home/HomButton.vue
  6. 2
      src/views/home/HomeView.vue

79
src/components/generator/config.js
View File

@ -19,6 +19,7 @@ export const formConf = {
export const inputComponents = [
{
// 组件的自定义配置
typeId: 1,
__config__: {
label: '单行文本',
labelWidth: null,
@ -51,6 +52,7 @@ export const inputComponents = [
disabled: false
},
{
typeId: 2,
__config__: {
label: '多行文本',
labelWidth: null,
@ -77,37 +79,40 @@ export const inputComponents = [
readonly: false,
disabled: false
},
// },
// {
// typeId: 3,
// __config__: {
// label: '密码',
// showLabel: true,
// labelWidth: null,
// changeTag: true,
// tag: 'el-input',
// tagIcon: 'password',
// defaultValue: undefined,
// layout: 'colFormItem',
// span: 24,
// required: true,
// regList: [],
// document: 'https://element.eleme.cn/#/zh-CN/component/input'
// },
// __slot__: {
// prepend: '',
// append: ''
// },
// placeholder: '请输入',
// 'show-password': true,
// style: {width: '100%'},
// clearable: true,
// 'prefix-icon': '',
// 'suffix-icon': '',
// maxlength: null,
// 'show-word-limit': false,
// readonly: false,
// disabled: false
// },
{
__config__: {
label: '密码',
showLabel: true,
labelWidth: null,
changeTag: true,
tag: 'el-input',
tagIcon: 'password',
defaultValue: undefined,
layout: 'colFormItem',
span: 24,
required: true,
regList: [],
document: 'https://element.eleme.cn/#/zh-CN/component/input'
},
__slot__: {
prepend: '',
append: ''
},
placeholder: '请输入',
'show-password': true,
style: {width: '100%'},
clearable: true,
'prefix-icon': '',
'suffix-icon': '',
maxlength: null,
'show-word-limit': false,
readonly: false,
disabled: false
},
{
typeId: 4,
__config__: {
label: '计数器',
showLabel: true,
@ -155,6 +160,7 @@ export const inputComponents = [
// 选择型组件 【左面板】
export const selectComponents = [
{
typeId: 5,
__config__: {
label: '下拉选择',
showLabel: true,
@ -185,6 +191,7 @@ export const selectComponents = [
multiple: false
},
{
typeId: 6,
__config__: {
label: '级联选择',
url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
@ -230,6 +237,7 @@ export const selectComponents = [
separator: '/'
},
{
typeId: 7,
__config__: {
label: '单选框组',
labelWidth: null,
@ -260,6 +268,7 @@ export const selectComponents = [
disabled: false
},
{
typeId: 8,
__config__: {
label: '多选框组',
tag: 'el-checkbox-group',
@ -292,6 +301,7 @@ export const selectComponents = [
disabled: false
},
{
typeId: 9,
__config__: {
label: '开关',
tag: 'el-switch',
@ -316,6 +326,7 @@ export const selectComponents = [
'inactive-value': false
},
{
typeId: 10,
__config__: {
label: '滑块',
tag: 'el-slider',
@ -338,6 +349,7 @@ export const selectComponents = [
range: false
},
{
typeId: 12,
__config__: {
label: '时间选择',
tag: 'el-time-picker',
@ -363,6 +375,7 @@ export const selectComponents = [
'value-format': 'HH:mm:ss'
},
{
typeId: 13,
__config__: {
label: '时间范围',
tag: 'el-time-picker',
@ -388,6 +401,7 @@ export const selectComponents = [
'value-format': 'HH:mm:ss'
},
{
typeId: 14,
__config__: {
label: '日期选择',
tag: 'el-date-picker',
@ -412,6 +426,7 @@ export const selectComponents = [
readonly: false
},
{
typeId: 15,
__config__: {
label: '日期范围',
tag: 'el-date-picker',
@ -438,6 +453,7 @@ export const selectComponents = [
readonly: false
},
{
typeId: 16,
__config__: {
label: '评分',
tag: 'el-rate',
@ -460,6 +476,7 @@ export const selectComponents = [
disabled: false
},
{
typeId: 17,
__config__: {
label: '颜色选择',
tag: 'el-color-picker',
@ -480,6 +497,7 @@ export const selectComponents = [
size: 'medium'
},
{
typeId: 18,
__config__: {
label: '上传',
tag: 'el-upload',
@ -624,3 +642,4 @@ export const layoutComponents = [
align: 'top'
}
]

2
src/router/modules/root.js
View File

@ -38,7 +38,7 @@ export default [
{
path: '/',
meta: {requireLogin: true},
component: () => import(/* webpackChunkName: 'root' */ '@/views/home/home-view')
component: () => import(/* webpackChunkName: 'root' */ '@/views/home/HomeView')
}
]
}, {

44
src/utils/formDataConvert.js
View File

@ -0,0 +1,44 @@
import _ from 'lodash'
/**
* 表单json转换为后台需要的对象
* @param item
*/
export function formItemConvertData(item) {
let data = {
'type': item.typeId,
'label': item.__config__.label,
'defaultValue': item.defaultValue,
'required': item.__config__.required,
'placeholder': item.placeholder,
'regList': item.__config__.regList
}
let extend = {}
let param = dataParams[item.typeId]
Object.keys(param).forEach(key => {
let value = _.get(item, param[key])
_.set(extend, key, value)
})
_.set(data, 'extend', extend)
console.log(data)
}
/**
* 不同属性的存在json的位置不用 使用变量记录key 通过lodash表达式获取
* @type {{'1': {maxlength: string, prepend: string, append: string}}}
*/
let dataParams = {
1: {
'prepend': '__slot__.prepend',
'maxlength': 'maxlength',
'append': '__slot__.append'
}
}

36
src/views/form/index.vue
View File

@ -43,23 +43,23 @@
</div>
<div class="center-board">
<!-- <div class="action-bar">-->
<!-- <el-button icon="el-icon-video-play" type="text" @click="run">-->
<!-- 运行-->
<!-- </el-button>-->
<!-- <el-button icon="el-icon-view" type="text" @click="showJson">-->
<!-- 查看json-->
<!-- </el-button>-->
<!-- <el-button icon="el-icon-download" type="text" @click="download">-->
<!-- 导出vue文件-->
<!-- </el-button>-->
<!-- <el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">-->
<!-- 复制代码-->
<!-- </el-button>-->
<!-- <el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">-->
<!-- 清空-->
<!-- </el-button>-->
<!-- </div>-->
<div class="action-bar">
<el-button icon="el-icon-video-play" type="text" @click="run">
运行
</el-button>
<el-button icon="el-icon-view" type="text" @click="showJson">
查看json
</el-button>
<el-button icon="el-icon-download" type="text" @click="download">
导出vue文件
</el-button>
<el-button class="copy-btn-main" icon="el-icon-document-copy" type="text" @click="copy">
复制代码
</el-button>
<el-button class="delete-btn" icon="el-icon-delete" type="text" @click="empty">
清空
</el-button>
</div>
<el-row type="flex" align="middle" justify="justify">
<el-col :span="18" :offset="6">
<el-menu default-active="1" style="background-color: transparent" mode="horizontal">
@ -163,6 +163,7 @@ import {
import {
exportDefault, beautifierConf, isNumberStr, titleCase, deepClone
} from '@/utils/index'
import {formItemConvertData} from '@/utils/formDataConvert'
import {
makeUpHtml, vueTemplate, vueScript, cssStyle
} from '@/components/generator/html'
@ -327,6 +328,7 @@ export default {
const clone = this.cloneComponent(item)
this.drawingList.push(clone)
this.activeFormItem(clone)
formItemConvertData(clone)
},
cloneComponent(origin) {
const clone = deepClone(origin)

0
src/views/home/home-button.vue → src/views/home/HomButton.vue
View File

2
src/views/home/home-view.vue → src/views/home/HomeView.vue
View File

@ -6,7 +6,7 @@
</template>
<script>
import HomeFunction from './home-button'
import HomeFunction from './HomButton'
import Dashboard from './dashboard'
export default {
Write Preview
Loading…
Cancel
Save