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

完善表单

old
wangqing 5 years ago
parent
4a3e4ab9b1
commit
8e9d798762
5 changed files with 140 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 0
      src/api/project.js
  2. 228
      src/components/generator/config.js
  3. 14
      src/utils/formDataConvert.js
  4. 2
      src/views/form/RightPanel.vue
  5. 25
      src/views/form/index.vue

0
src/api/project.js
View File

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

@ -529,117 +529,117 @@ export const selectComponents = [
} }
] ]
// 布局型组件 【左面板】 // // 布局型组件 【左面板】
export const layoutComponents = [ // export const layoutComponents = [
{ // {
__config__: { // __config__: {
layout: 'rowFormItem', // layout: 'rowFormItem',
tagIcon: 'row', // tagIcon: 'row',
label: '行容器', // label: '行容器',
layoutTree: true, // layoutTree: true,
document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes' // document: 'https://element.eleme.cn/#/zh-CN/component/layout#row-attributes'
}, // },
type: 'default', // type: 'default',
justify: 'start', // justify: 'start',
align: 'top' // align: 'top'
}, // },
{ // {
__config__: { // __config__: {
label: '按钮', // label: '按钮',
showLabel: true, // showLabel: true,
changeTag: true, // changeTag: true,
labelWidth: null, // labelWidth: null,
tag: 'el-button', // tag: 'el-button',
tagIcon: 'button', // tagIcon: 'button',
span: 24, // span: 24,
layout: 'colFormItem', // layout: 'colFormItem',
document: 'https://element.eleme.cn/#/zh-CN/component/button' // document: 'https://element.eleme.cn/#/zh-CN/component/button'
}, // },
__slot__: { // __slot__: {
default: '主要按钮' // default: '主要按钮'
}, // },
type: 'primary', // type: 'primary',
icon: 'el-icon-search', // icon: 'el-icon-search',
round: false, // round: false,
size: 'medium', // size: 'medium',
plain: false, // plain: false,
circle: false, // circle: false,
disabled: false // disabled: false
}, // },
{ // {
__config__: { // __config__: {
layout: 'colFormItem', // layout: 'colFormItem',
tagIcon: 'table', // tagIcon: 'table',
tag: 'el-table', // tag: 'el-table',
document: 'https://element.eleme.cn/#/zh-CN/component/table', // document: 'https://element.eleme.cn/#/zh-CN/component/table',
span: 24, // span: 24,
formId: 101, // formId: 101,
renderKey: 1595761764203, // renderKey: 1595761764203,
componentName: 'row101', // componentName: 'row101',
showLabel: true, // showLabel: true,
changeTag: true, // changeTag: true,
labelWidth: null, // labelWidth: null,
label: '表格[开发中]', // label: '表格[开发中]',
children: [{ // children: [{
__config__: { // __config__: {
layout: 'raw', // layout: 'raw',
tag: 'el-table-column', // tag: 'el-table-column',
renderKey: 15957617660153 // renderKey: 15957617660153
}, // },
prop: 'date', // prop: 'date',
label: '日期' // label: '日期'
}, { // }, {
__config__: { // __config__: {
layout: 'raw', // layout: 'raw',
tag: 'el-table-column', // tag: 'el-table-column',
renderKey: 15957617660152 // renderKey: 15957617660152
}, // },
prop: 'address', // prop: 'address',
label: '地址' // label: '地址'
}, { // }, {
__config__: { // __config__: {
layout: 'raw', // layout: 'raw',
tag: 'el-table-column', // tag: 'el-table-column',
renderKey: 15957617660151 // renderKey: 15957617660151
}, // },
prop: 'name', // prop: 'name',
label: '名称' // label: '名称'
}, { // }, {
__config__: { // __config__: {
layout: 'raw', // layout: 'raw',
tag: 'el-table-column', // tag: 'el-table-column',
renderKey: 1595774496335, // renderKey: 1595774496335,
children: [ // children: [
{ // {
__config__: { // __config__: {
label: '按钮', // label: '按钮',
tag: 'el-button', // tag: 'el-button',
tagIcon: 'button', // tagIcon: 'button',
layout: 'raw', // layout: 'raw',
renderKey: 1595779809901 // renderKey: 1595779809901
}, // },
__slot__: { // __slot__: {
default: '主要按钮' // default: '主要按钮'
}, // },
type: 'primary', // type: 'primary',
icon: 'el-icon-search', // icon: 'el-icon-search',
round: false, // round: false,
size: 'medium' // size: 'medium'
} // }
] // ]
}, // },
label: '操作' // label: '操作'
}] // }]
}, // },
data: [{ // data: [{
date: '2016-05-02', // date: '2016-05-02',
name: '王小虎', // name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄' // address: '上海市普陀区金沙江路 1518 弄'
}], // }],
border: true, // border: true,
type: 'default', // type: 'default',
justify: 'start', // justify: 'start',
align: 'top' // align: 'top'
} // }
] // ]
//

14
src/utils/formDataConvert.js
View File

@ -5,8 +5,10 @@ import _ from 'lodash'
* @param item * @param item
*/ */
export function formItemConvertData(item) { export function formItemConvertData(item) {
console.log(item)
let data = { let data = {
'type': item.typeId, 'type': item.typeId,
'formItemId': item.__config__.formId,
'label': item.__config__.label, 'label': item.__config__.label,
'defaultValue': item.defaultValue, 'defaultValue': item.defaultValue,
'required': item.__config__.required, 'required': item.__config__.required,
@ -15,11 +17,13 @@ export function formItemConvertData(item) {
} }
let extend = {} let extend = {}
let param = dataParams[item.typeId] let param = dataParams[item.typeId]
Object.keys(param).forEach(key => { if (param) {
let value = _.get(item, param[key]) Object.keys(param).forEach(key => {
_.set(extend, key, value) let value = _.get(item, param[key])
}) _.set(extend, key, value)
_.set(data, 'extend', extend) })
_.set(data, 'extend', extend)
}
console.log(data) console.log(data)
} }

2
src/views/form/RightPanel.vue
View File

@ -647,7 +647,7 @@ import TreeNodeDialog from '@/views/form/TreeNodeDialog'
import { isNumberStr } from '@/utils/index' import { isNumberStr } from '@/utils/index'
import IconsDialog from './IconsDialog' import IconsDialog from './IconsDialog'
import { import {
inputComponents, selectComponents, layoutComponents inputComponents, selectComponents
} from '@/components/generator/config' } from '@/components/generator/config'
import { saveFormConf } from '@/utils/db' import { saveFormConf } from '@/utils/db'

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

@ -76,13 +76,14 @@
<el-row type="flex" justify="center" align="middle"> <el-row type="flex" justify="center" align="middle">
<el-col :span="20" style="text-align: center"> <el-col :span="20" style="text-align: center">
<h4 class="form-name-text" contenteditable="true" <h4 class="form-name-text" contenteditable="true"
@input="(event)=>{formConf.title=event.target.innerText}">{{formConf.title}}</h4> @input="(event)=>{formConf.title=event.target.innerText;this.saveProjectInfo()}">
{{formConf.title}}</h4>
</el-col> </el-col>
</el-row> </el-row>
<el-row type="flex" justify="center" align="middle"> <el-row type="flex" justify="center" align="middle">
<el-col :span="20" style="text-align: center"> <el-col :span="20" style="text-align: center">
<p class="form-name-text" contenteditable="true" <p class="form-name-text" contenteditable="true"
@input="(event)=>{formConf.description=event.target.innerText}"> @input="(event)=>{formConf.description=event.target.innerText;this.saveProjectInfo()}">
{{formConf.description}} {{formConf.description}}
</p> </p>
</el-col> </el-col>
@ -158,7 +159,7 @@ import RightPanel from './RightPanel'
// import '@/assets/styles/index.scss' // import '@/assets/styles/index.scss'
import { import {
inputComponents, selectComponents, layoutComponents, formConf inputComponents, selectComponents, formConf
} from '@/components/generator/config' } from '@/components/generator/config'
import { import {
exportDefault, beautifierConf, isNumberStr, titleCase, deepClone exportDefault, beautifierConf, isNumberStr, titleCase, deepClone
@ -204,7 +205,6 @@ export default {
formConf, formConf,
inputComponents, inputComponents,
selectComponents, selectComponents,
layoutComponents,
labelWidth: 100, labelWidth: 100,
drawingList: drawingDefalut, drawingList: drawingDefalut,
drawingData: {}, drawingData: {},
@ -227,10 +227,6 @@ export default {
{ {
title: '选择型组件', title: '选择型组件',
list: selectComponents list: selectComponents
},
{
title: '布局型组件',
list: layoutComponents
} }
] ]
} }
@ -310,6 +306,15 @@ export default {
}, },
methods: { methods: {
saveProjectInfo: debounce(430, true, function() {
this.$api.post('/project/update', {
'key': this.projectKey,
'name': this.formConf.title,
'describe': this.formConf.description
}).then((res) => {
})
}),
activeFormItem(currentItem) { activeFormItem(currentItem) {
this.activeData = currentItem this.activeData = currentItem
this.activeId = currentItem.__config__.formId this.activeId = currentItem.__config__.formId
@ -319,6 +324,7 @@ export default {
console.log(value) console.log(value)
}, },
onEnd(obj) { onEnd(obj) {
console.log(11)
if (obj.from !== obj.to) { if (obj.from !== obj.to) {
this.activeData = tempActiveData this.activeData = tempActiveData
this.activeId = this.idGlobal this.activeId = this.idGlobal
@ -328,7 +334,6 @@ export default {
const clone = this.cloneComponent(item) const clone = this.cloneComponent(item)
this.drawingList.push(clone) this.drawingList.push(clone)
this.activeFormItem(clone) this.activeFormItem(clone)
formItemConvertData(clone)
}, },
cloneComponent(origin) { cloneComponent(origin) {
const clone = deepClone(origin) const clone = deepClone(origin)
@ -337,6 +342,7 @@ export default {
this.createIdAndKey(clone) this.createIdAndKey(clone)
clone.placeholder !== undefined && (clone.placeholder += config.label) clone.placeholder !== undefined && (clone.placeholder += config.label)
tempActiveData = clone tempActiveData = clone
formItemConvertData(clone)
return tempActiveData return tempActiveData
}, },
createIdAndKey(item) { createIdAndKey(item) {
@ -431,6 +437,7 @@ export default {
this.operationType = 'copy' this.operationType = 'copy'
}, },
tagChange(newTag) { tagChange(newTag) {
console.log('tagChange')
newTag = this.cloneComponent(newTag) newTag = this.cloneComponent(newTag)
const config = newTag.__config__ const config = newTag.__config__
newTag.__vModel__ = this.activeData.__vModel__ newTag.__vModel__ = this.activeData.__vModel__

Write Preview
Loading…
Cancel
Save