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

fix: radio checkbox other input

old
wangqing 4 years ago
parent
16ed707b8c
commit
cfbe3c6cd5
4 changed files with 64 additions and 32 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. 6
      src/components/generator/config.js
  2. 52
      src/components/parser/Parser.vue
  3. 20
      src/components/render/slots/el-checkbox-group.js
  4. 18
      src/components/render/slots/el-radio-group.js

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

@ -695,7 +695,7 @@ export const personalInfoComponents = [
append: '' append: ''
}, },
placeholder: '请输入手机号', placeholder: '请输入手机号',
style: { width: '100%' }, style: {width: '100%'},
clearable: true, clearable: true,
'prefix-icon': 'el-icon-mobile', 'prefix-icon': 'el-icon-mobile',
'suffix-icon': '', 'suffix-icon': '',
@ -731,7 +731,7 @@ export const personalInfoComponents = [
append: '' append: ''
}, },
placeholder: '请输入邮箱', placeholder: '请输入邮箱',
style: { width: '100%' }, style: {width: '100%'},
clearable: true, clearable: true,
'prefix-icon': 'el-icon-message', 'prefix-icon': 'el-icon-message',
'suffix-icon': '', 'suffix-icon': '',
@ -767,7 +767,7 @@ export const personalInfoComponents = [
append: '' append: ''
}, },
placeholder: '请输入身份证', placeholder: '请输入身份证',
style: { width: '100%' }, style: {width: '100%'},
clearable: true, clearable: true,
'prefix-icon': 'el-icon-postcard', 'prefix-icon': 'el-icon-postcard',
'suffix-icon': '', 'suffix-icon': '',

52
src/components/parser/Parser.vue
View File

@ -194,12 +194,14 @@ function setValue(event, config, scheme) {
function nextPage(page) { function nextPage(page) {
switchPage.call(this, 'next', page) switchPage.call(this, 'next', page)
} }
/** /**
* 分页上一页 * 分页上一页
*/ */
function prevPage(page) { function prevPage(page) {
switchPage.call(this, 'prev', page) switchPage.call(this, 'prev', page)
} }
/** /**
* 切换页 * 切换页
*/ */
@ -212,7 +214,11 @@ function switchPage(eventName, page) {
}, 100) }, 100)
return false return false
} else { } else {
this.$emit(eventName, {page: page, formModel: this[this.formConf.formModel], labelFormModel: this[this.formConf.labelFormModel]}) this.$emit(eventName, {
page: page,
formModel: this[this.formConf.formModel],
labelFormModel: this[this.formConf.labelFormModel]
})
} }
return true return true
}) })
@ -223,19 +229,30 @@ function switchPage(eventName, page) {
*/ */
function setOtherValueLabel(event, config) { function setOtherValueLabel(event, config) {
let value = this[this.formConf.formModel][config.__vModel__] let value = this[this.formConf.formModel][config.__vModel__]
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event) // 临时保存其他的选项值
setValueLabel.call(this, value, config.__config__, config) this.$nextTick(() => {
console.log(this[this.formConf.labelFormModel])
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event)
console.log(this[this.formConf.labelFormModel])
setValueLabel.call(this, value, config.__config__, config)
})
} }
/** /**
* this.formConf.formModel 保存表单的原始值 如checkbox radio的值是 1,2,3等
* this.formConf.labelFormModel 保存显示的值 如选项一 选项二等
* 保存选项的label值 * 保存选项的label值
* @param event * @param event
* @param config * @param config
* @param scheme * @param scheme
*/ */
function setValueLabel(event, config, scheme) { function setValueLabel(event, config, scheme) {
// 需要处理的类型 如果是input等则不需要处理
let tagOptionKey = processType[config.tag] let tagOptionKey = processType[config.tag]
if (tagOptionKey) { if (tagOptionKey) {
// eslint-disable-next-line no-debugger
// debugger
if (event instanceof Array) { if (event instanceof Array) {
let labelArr = new Array() let labelArr = new Array()
event.forEach(item => { event.forEach(item => {
@ -251,7 +268,8 @@ function setValueLabel(event, config, scheme) {
} else { } else {
// 多选 单选 其他自定义输入 // 多选 单选 其他自定义输入
if (event == 0) { if (event == 0) {
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}`, this[this.formConf.labelFormModel][`${config.__vModel__}other`]) console.log(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`])
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}`, this[this.formConf.labelFormModel][`${scheme.__vModel__}other`])
} else { } else {
let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) let item = _.find(_.get(scheme, tagOptionKey), {'value': event})
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label) this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label)
@ -289,7 +307,7 @@ function buildListeners(scheme) {
listeners.input = event => setValue.call(this, event, config, scheme) listeners.input = event => setValue.call(this, event, config, scheme)
listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList) listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList)
listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme, file, fileList) listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme, file, fileList)
listeners.selectOtherChange = (event, config) => setOtherValueLabel.call(this, event, config) listeners.otherChange = (event, config) => setOtherValueLabel.call(this, event, config)
listeners.prev = page => prevPage.call(this, page) listeners.prev = page => prevPage.call(this, page)
listeners.next = page => nextPage.call(this, page) listeners.next = page => nextPage.call(this, page)
return listeners return listeners
@ -354,8 +372,6 @@ export default {
}, },
initFormData(componentList, formData) { initFormData(componentList, formData) {
// 设置默认值 // 设置默认值
// eslint-disable-next-line no-debugger
debugger
componentList.forEach(cur => { componentList.forEach(cur => {
const config = cur.__config__ const config = cur.__config__
if (cur.__vModel__ && !formData[cur.__vModel__]) { if (cur.__vModel__ && !formData[cur.__vModel__]) {
@ -426,18 +442,18 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
/deep/ .el-radio-group, ::v-deep .el-radio-group,
/deep/ .el-checkbox-group { ::v-deep .el-checkbox-group {
margin-left: 10px; margin-left: 10px;
} }
/deep/ .el-radio, ::v-deep .el-radio,
/deep/ .el-checkbox { ::v-deep .el-checkbox {
display: block; display: block;
min-height: 23px; min-height: 23px;
line-height: 23px; line-height: 23px;
} }
/deep/ .el-radio__label, ::v-deep .el-radio__label,
/deep/ .el-checkbox__label { ::v-deep .el-checkbox__label {
font-size: 14px; font-size: 14px;
padding-left: 10px; padding-left: 10px;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -446,11 +462,11 @@ export default {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
/deep/ .item-other-input { ::v-deep .item-other-input {
margin-left: 20px; margin-left: 20px !important;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
} }
/deep/ .item-other-input:focus { ::v-deep .item-other-input:focus {
outline: none; outline: none !important;
} }
</style> </style>

20
src/components/render/slots/el-checkbox-group.js
View File

@ -6,11 +6,21 @@ export default {
list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>) list.push(<el-checkbox-button label={item.value}>{item.label}</el-checkbox-button>)
} else { } else {
if (item.value == 0) { if (item.value == 0) {
list.push(<el-checkbox label={item.value} list.push(
border={conf.border}>{item.label} <div style="display: flex;align-items: center;">
<input class='item-other-input' onChange={event => { <el-checkbox label={item.value}
that.$emit('selectOtherChange', event.target.value, conf) border={conf.border}>{item.label}
}}/></el-checkbox>) </el-checkbox>
<input class="item-other-input"
onInput={event => {
console.log(event)
that.$emit('otherChange', event.target.value, conf)
}}
onChange={event => {
that.$emit('otherChange', event.target.value, conf)
}}/>
</div>
)
} else { } else {
list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>) list.push(<el-checkbox label={item.value} border={conf.border}>{item.label}</el-checkbox>)
} }

18
src/components/render/slots/el-radio-group.js
View File

@ -6,12 +6,18 @@ export default {
list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>) list.push(<el-radio-button label={item.value}>{item.label}</el-radio-button>)
} else { } else {
if (item.value == 0) { if (item.value == 0) {
list.push(<el-radio label={item.value} border={conf.border} > list.push(
{item.label}<input class='item-other-input' onChange={event => { <el-radio label={item.value} border={conf.border}>
// eslint-disable-next-line vue/custom-event-name-casing {item.label}
that.$emit('selectOtherChange', event.target.value, conf) <input class="item-other-input"
}}/> onInput={event => {
</el-radio>) console.log(event)
that.$emit('otherChange', event.target.value, conf)
}}
onChange={event => {
that.$emit('otherChange', event.target.value, conf)
}}/>
</el-radio>)
} else { } else {
list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>) list.push(<el-radio label={item.value} border={conf.border}>{item.label}</el-radio>)
} }

Write Preview
Loading…
Cancel
Save