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

级联

old
jiangyy 4 years ago
parent
bd05f97801
commit
d7829676b0
4 changed files with 478 additions and 404 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. 858
      src/components/parser/Parser.vue
  2. 2
      src/views/form/editor/RightPanel.vue
  3. 8
      src/views/form/index.vue
  4. 14
      src/views/form/publish/index.vue

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

@ -1,247 +1,248 @@
<script> <script>
import {deepClone} from '@/utils/index' import { deepClone } from '@/utils/index'
import {evalExpression} from '@/utils/expression' import { evalExpression } from '@/utils/expression'
import render from '@/components/render/render.js' import render from '@/components/render/render.js'
import _ from 'lodash' import _ from 'lodash'
const ruleTrigger = { const ruleTrigger = {
'el-input': 'blur', 'el-input': 'blur',
'el-input-number': 'blur', 'el-input-number': 'blur',
'el-select': 'change', 'el-select': 'change',
'el-radio-group': 'change', 'el-radio-group': 'change',
'el-checkbox-group': 'change', 'el-checkbox-group': 'change',
'el-cascader': 'change', 'el-cascader': 'change',
'el-time-picker': 'change', 'el-time-picker': 'change',
'el-date-picker': 'change', 'el-date-picker': 'change',
'el-rate': 'change' 'el-rate': 'change'
} }
const processType = { const processType = {
'el-select': '__slot__.options', 'el-select': '__slot__.options',
'el-cascader': 'options', 'el-cascader': 'options',
'el-radio-group': '__slot__.options', 'el-radio-group': '__slot__.options',
'el-checkbox-group': '__slot__.options' 'el-checkbox-group': '__slot__.options'
} }
const layouts = { const layouts = {
colFormItem(h, scheme) { colFormItem (h, scheme) {
const config = scheme.__config__ const config = scheme.__config__
const listeners = buildListeners.call(this, scheme) const listeners = buildListeners.call(this, scheme)
const {formConfCopy} = this const { formConfCopy } = this
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
if (config.showLabel === false) labelWidth = '0' if (config.showLabel === false) labelWidth = '0'
let label = config.label let label = config.label
// 显示序号 // 显示序号
if (formConfCopy.showNumber) { if (formConfCopy.showNumber) {
label = scheme.serialNumber + ': ' + label label = scheme.serialNumber + ': ' + label
} }
// 分页返回上一页时把值设置回表单 // 分页返回上一页时把值设置回表单
let value = _.get(this[this.formConf.formModel], scheme.__vModel__) let value = _.get(this[this.formConf.formModel], scheme.__vModel__)
if (value) { if (value) {
config.defaultValue = value config.defaultValue = value
} }
// 表单被重新渲染 控制逻辑显示隐藏 // 表单被重新渲染 控制逻辑显示隐藏
let triggerShow = _.indexOf(this.logicTriggerItemList, config.formId) > -1 let triggerShow = _.indexOf(this.logicTriggerItemList, config.formId) > -1
let colStyle = scheme.logicShow || triggerShow ? '' : 'display:none' let colStyle = scheme.logicShow || triggerShow ? '' : 'display:none'
let cidAttr = config.formId let cidAttr = config.formId
return ( return (
<el-col span={config.span} style={colStyle} cid={cidAttr}> <el-col span={config.span} style={colStyle} cid={cidAttr}>
<el-form-item label-width={labelWidth} prop={scheme.__vModel__} <el-form-item label-width={labelWidth} prop={scheme.__vModel__}
label={config.showLabel ? label : ''}> label={config.showLabel ? label : ''}>
<render conf={scheme} {...{on: listeners}} /> <render conf={scheme} {...{ on: listeners }} />
</el-form-item> </el-form-item>
</el-col> </el-col>
) )
}, },
rowFormItem(h, scheme) { rowFormItem (h, scheme) {
let child = renderChildren.apply(this, arguments) let child = renderChildren.apply(this, arguments)
if (scheme.type === 'flex') { if (scheme.type === 'flex') {
child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}> child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}>
{child} {child}
</el-row> </el-row>
}
return (
<el-col span={scheme.span}>
<el-row gutter={scheme.gutter}>
{child}
</el-row>
</el-col>
)
} }
}
function renderFrom(h) {
const {formConfCopy} = this
return ( return (
<el-row gutter={formConfCopy.gutter}> <el-col span={scheme.span}>
<el-form <el-row gutter={scheme.gutter}>
size={formConfCopy.size} {child}
label-position={formConfCopy.labelPosition}
disabled={formConfCopy.disabled}
label-width={`${formConfCopy.labelWidth}px`}
ref={formConfCopy.formRef}
// model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664
props={{model: this[formConfCopy.formModel]}}
rules={this[formConfCopy.formRules]}
>
{renderFormItem.call(this, h, formConfCopy.fields)}
{formConfCopy.formBtns && formBtns.call(this, h)}
</el-form>
</el-row> </el-row>
</el-col>
) )
}
}
function renderFrom (h) {
const { formConfCopy } = this
return (
<el-row gutter={formConfCopy.gutter}>
<el-form
size={formConfCopy.size}
label-position={formConfCopy.labelPosition}
disabled={formConfCopy.disabled}
label-width={`${formConfCopy.labelWidth}px`}
ref={formConfCopy.formRef}
// model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664
props={{ model: this[formConfCopy.formModel] }}
rules={this[formConfCopy.formRules]}
>
{renderFormItem.call(this, h, formConfCopy.fields)}
{formConfCopy.formBtns && formBtns.call(this, h)}
</el-form>
</el-row>
)
} }
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function formBtns(h) { function formBtns (h) {
const {formConfCopy} = this const { formConfCopy } = this
let style = { let style = {
'background-color': formConfCopy.submitBtnColor, 'background-color': formConfCopy.submitBtnColor,
'border-color': formConfCopy.submitBtnColor 'border-color': formConfCopy.submitBtnColor
} }
let btnSpan = 24 let btnSpan = 24
if (formConfCopy.resetBtn) { if (formConfCopy.resetBtn) {
return <el-col>
<el-form-item size="large" style="margin-top:30px">
<el-row>
<el-col span="4" offset="6">
<el-button type="primary" onClick={this.submitForm}>提交</el-button>
</el-col>
<el-col span="9" offset="3">
<el-button onClick={this.resetForm}>重置</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
}
return <el-col> return <el-col>
<el-form-item size="large" class="submit-btn-form-item" style="margin-top:30px;"> <el-form-item size="large" style="margin-top:30px">
<el-row type="flex" justify="center"> <el-row>
<el-col span={btnSpan}> <el-col span="4" offset="6">
<el-button style={style} type="primary" <el-button type="primary" onClick={this.submitForm}>提交</el-button>
onClick={this.submitForm}>{this.formConfCopy.submitBtnText}</el-button> </el-col>
</el-col> <el-col span="9" offset="3">
</el-row> <el-button onClick={this.resetForm}>重置</el-button>
</el-form-item> </el-col>
</el-row>
</el-form-item>
</el-col> </el-col>
}
return <el-col>
<el-form-item size="large" class="submit-btn-form-item" style="margin-top:30px;">
<el-row type="flex" justify="center">
<el-col span={btnSpan}>
<el-button style={style} type="primary"
onClick={this.submitForm}>{this.formConfCopy.submitBtnText}</el-button>
</el-col>
</el-row>
</el-form-item>
</el-col>
} }
function renderFormItem(h, elementList) { function renderFormItem (h, elementList) {
return elementList.map(scheme => { return elementList.map(scheme => {
const config = scheme.__config__ const config = scheme.__config__
const layout = layouts[config.layout] const layout = layouts[config.layout]
if (layout) { if (layout) {
return layout.call(this, h, scheme) return layout.call(this, h, scheme)
} }
throw new Error(`没有与${config.layout}匹配的layout`) throw new Error(`没有与${config.layout}匹配的layout`)
}) })
} }
function renderChildren(h, scheme) { function renderChildren (h, scheme) {
const config = scheme.__config__ const config = scheme.__config__
if (!Array.isArray(config.children)) return null if (!Array.isArray(config.children)) return null
return renderFormItem.call(this, h, config.children) return renderFormItem.call(this, h, config.children)
} }
function setUpload(config, scheme, response, file) { function setUpload (config, scheme, response, file) {
let newValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__]) let newValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])
if (!newValue) { if (!newValue) {
newValue = [] newValue = []
} }
newValue.push({fileName: file.name, url: response.data}) newValue.push({ fileName: file.name, url: response.data })
this.$set(config, 'defaultValue', newValue) this.$set(config, 'defaultValue', newValue)
this.$set(this[this.formConf.formModel], scheme.__vModel__, newValue) this.$set(this[this.formConf.formModel], scheme.__vModel__, newValue)
setValueLabel.call(this, {type: 'file', files: newValue}, config, scheme) setValueLabel.call(this, { type: 'file', files: newValue }, config, scheme)
} }
function deleteUpload(config, scheme, file, fileList) { function deleteUpload (config, scheme, file, fileList) {
let newValue = [] let newValue = []
fileList.forEach(element => { fileList.forEach(element => {
newValue.push({fileName: element.name, url: element.url}) newValue.push({ fileName: element.name, url: element.url })
}) })
this.$set(config, 'defaultValue', newValue) this.$set(config, 'defaultValue', newValue)
this.$set(this[this.formConf.formModel], scheme.__vModel__, newValue) this.$set(this[this.formConf.formModel], scheme.__vModel__, newValue)
setValueLabel.call(this, {type: 'file', files: newValue}, config, scheme) setValueLabel.call(this, { type: 'file', files: newValue }, config, scheme)
} }
function setValue(event, config, scheme) { function setValue (event, config, scheme) {
this.$set(config, 'defaultValue', event) this.$set(config, 'defaultValue', event)
this.$set(this[this.formConf.formModel], scheme.__vModel__, event) this.$set(this[this.formConf.formModel], scheme.__vModel__, event)
setValueLabel.call(this, event, config, scheme) setValueLabel.call(this, event, config, scheme)
let logicShowRule = this.formConfCopy.logicShowRule let logicShowRule = this.formConfCopy.logicShowRule
if (!logicShowRule) { if (!logicShowRule) {
return return
} }
// 找到该问题需要触发显示的问题 判断逻辑是否成立 // 找到该问题需要触发显示的问题 判断逻辑是否成立
let rules = _.get(logicShowRule, config.formId) let rules = _.get(logicShowRule, config.formId)
if (rules && Array.isArray(rules)) { if (rules && Array.isArray(rules)) {
rules.forEach(r => { rules.forEach(r => {
// 成立让该对应的问题显示出来 // 成立让该对应的问题显示出来
let flag = evalExpression(this[this.formConf.formModel], r.logicExpression) let flag = evalExpression(this[this.formConf.formModel], r.logicExpression)
if (flag) { if (flag) {
// 防止表单重新渲染 display被刷新 // 防止表单重新渲染 display被刷新
this.logicTriggerItemList.push(r.triggerFormItemId) this.logicTriggerItemList.push(r.triggerFormItemId)
console.log(this.logicTriggerItemList) console.log(this.logicTriggerItemList)
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = '' document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = ''
} else { } else {
_.remove(this.logicTriggerItemList, function(n) { _.remove(this.logicTriggerItemList, function (n) {
return n == r.triggerFormItemId return n == r.triggerFormItemId
})
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = 'none'
}
}) })
} document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = 'none'
}
})
}
} }
/** /**
* 分页下一页 * 分页下一页
*/ */
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)
} }
/** /**
* 切换页 * 切换页
*/ */
function switchPage(eventName, page) { function switchPage (eventName, page) {
this.$refs[this.formConf.formRef].validate(valid => { this.$refs[this.formConf.formRef].validate(valid => {
if (!valid) { if (!valid) {
setTimeout(() => { setTimeout(() => {
let isError = document.getElementsByClassName('is-error') let isError = document.getElementsByClassName('is-error')
isError[0].querySelector('input').focus() isError[0].querySelector('input').focus()
}, 100) }, 100)
return false return false
} else { } else {
this.$emit(eventName, { this.$emit(eventName, {
page: page, page: page,
formModel: this[this.formConf.formModel], formModel: this[this.formConf.formModel],
labelFormModel: this[this.formConf.labelFormModel] labelFormModel: this[this.formConf.labelFormModel]
}) })
} }
return true return true
}) })
} }
/** /**
* radio checkbox 其他输入框值处理 * radio checkbox 其他输入框值处理
*/ */
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.$nextTick(() => { // 临时保存其他的选项值
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event) this.$nextTick(() => {
console.log(this[this.formConf.labelFormModel]) this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event)
setValueLabel.call(this, value, config.__config__, config) console.log(this[this.formConf.labelFormModel])
}) setValueLabel.call(this, value, config.__config__, config)
})
} }
@ -253,234 +254,291 @@ function setOtherValueLabel(event, config) {
* @param config * @param config
* @param scheme * @param scheme
*/ */
function setValueLabel(event, config, scheme) { function setValueLabel (event, config, scheme) {
// 需要处理的类型 如果是input等则不需要处理 console.log(event)
let tagOptionKey = processType[config.tag] console.log(config)
if (tagOptionKey) { console.log(scheme)
if (event instanceof Array) { // 需要处理的类型 如果是input等则不需要处理
// 多选 其他自定义输入 let tagOptionKey = processType[config.tag]
let labelArr = new Array()
if (!event.includes(0)) { if (tagOptionKey) {
// 如果多选里没有选择其他，就清掉other
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '') if (event instanceof Array) {
// 同时把输入框清空 // 多选 其他自定义输入
document.querySelector('.' + config.tag).querySelector('.item-other-input').value = ''
}
event.forEach(item => {
// 拼到头部 其他选项 if (!event.includes(0) && config.tag != 'el-cascader') {
let {label} = getObject(_.get(scheme, tagOptionKey), 'value', item) // 如果多选里没有选择其他，就清掉other
labelArr.push(label) this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '')
}) // 同时把输入框清空
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelArr.join(',')) document.querySelector('.' + config.tag).querySelector('.item-other-input').value = ''
} else { }
// 单选 其他自定义输入 // debugger
if (event == 0) {
console.log(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) if (config.tag === 'el-cascader') {
// 如果选择了其他，把label存在field字段，把输入框内容存在fieldother字段 let labelFormModelArray = []
let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) if (scheme.props.props.multiple) {//多选
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label)
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) event.forEach(item => {
} else { let itemObj = getCascaderData(item, tagOptionKey, scheme)
let item = _.find(_.get(scheme, tagOptionKey), {'value': event}) labelFormModelArray.push(itemObj)
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label) })
// 如果没有选择其他，就清掉other
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '') } else {//单选
// 同时把输入框清空 let itemObj = getCascaderData(event, tagOptionKey, scheme)
document.querySelector('.' + config.tag).querySelector('.item-other-input').value = '""' labelFormModelArray.push(itemObj)
}
} }
} else if (config.tag === 'el-upload') { this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelFormModelArray)
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
} else {
let labelArr = new Array()
event.forEach(item => {
// 拼到头部 其他选项
let { label } = getObject(_.get(scheme, tagOptionKey), 'value', item)
labelArr.push(label)
})
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelArr.join(','))
}
console.log('最终结果')
console.log(this[this.formConf.labelFormModel])
} else { } else {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event) // 单选 其他自定义输入
if (event == 0) {
console.log(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`])
// 如果选择了其他，把label存在field字段，把输入框内容存在fieldother字段
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__}other`, this[this.formConf.labelFormModel][`${scheme.__vModel__}other`])
} else {
let item = _.find(_.get(scheme, tagOptionKey), { 'value': event })
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, item.label)
// 如果没有选择其他，就清掉other
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '')
// 同时把输入框清空
document.querySelector('.' + config.tag).querySelector('.item-other-input').value = '""'
}
} }
} else if (config.tag === 'el-upload') {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
} else {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
}
} }
function getObject(array, key, value) { function getCascaderData (array, tagOptionKey, scheme) {
let o let labelArr = new Array()
array.some(function iter(a) { array.forEach(item => {
if (a[key] === value) { // 拼到头部 其他选项
o = a let { label } = getObject(_.get(scheme, tagOptionKey), 'value', item)
return true labelArr.push(label)
} })
return Array.isArray(a.children) && a.children.some(iter)
}) const item = array[array.length - 1]
return o let itemObj = getObject(_.get(scheme, tagOptionKey), 'value', item)
itemObj.labels = labelArr
itemObj.pathName = labelArr.join(scheme.separator)
return itemObj
} }
function buildListeners(scheme) { function getObject (array, key, value) {
const config = scheme.__config__
const methods = this.formConf.__methods__ || {}
const listeners = {}
// 给__methods__中的方法绑定this和event let o
Object.keys(methods).forEach(key => { array.some(function iter (a) {
listeners[key] = event => methods[key].call(this, event)
}) if (a[key].isArray) {
// 响应 render.js 中的 vModel $emit('input', val) this.getObject(a[key], key, value)
listeners.input = event => setValue.call(this, event, config, scheme) } else {
listeners.upload = (response, file, fileList) => setUpload.call(this, config, scheme, response, file, fileList) if (a[key] === value) {
listeners.deleteUpload = (file, fileList) => deleteUpload.call(this, config, scheme, file, fileList) o = a
listeners.otherChange = (event, config) => setOtherValueLabel.call(this, event, config) return true
listeners.prev = page => prevPage.call(this, page) }
listeners.next = page => nextPage.call(this, page) return Array.isArray(a.children) && a.children.some(iter)
return listeners }
})
return o
}
function buildListeners (scheme) {
const config = scheme.__config__
const methods = this.formConf.__methods__ || {}
const listeners = {}
// 给__methods__中的方法绑定this和event
Object.keys(methods).forEach(key => {
listeners[key] = event => methods[key].call(this, event)
})
// 响应 render.js 中的 vModel $emit('input', val)
listeners.input = event => setValue.call(this, event, config, scheme)
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.otherChange = (event, config) => setOtherValueLabel.call(this, event, config)
listeners.prev = page => prevPage.call(this, page)
listeners.next = page => nextPage.call(this, page)
return listeners
} }
export default { export default {
components: { components: {
render render
},
props: {
formConf: {
type: Object,
required: true
}, },
props: { formModel: {
formConf: { type: Object,
type: Object, required: false
required: true },
}, labelFormModel: {
formModel: { type: Object,
type: Object, required: false
required: false }
}, },
labelFormModel: { data () {
type: Object, const data = {
required: false formConfCopy: deepClone(this.formConf),
[this.formConf.formModel]: deepClone(this.formModel),
[this.formConf.labelFormModel]: deepClone(this.labelFormModel),
[this.formConf.formRules]: {},
// 已经被触发显示的问题
logicTriggerItemList: []
}
this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel])
this.initLabelFormData(data.formConfCopy.fields, data[this.formConf.labelFormModel])
this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules])
return data
},
methods: {
initLabelFormData (componentList, formData) {
// 获取选择项选中的显示的值
componentList.forEach(cur => {
let temConfig = cur.__config__
if (cur.__vModel__ && !formData[cur.__vModel__]) {
let tagOptionKey = processType[temConfig.tag]
let defaultValue = temConfig.defaultValue
let labelStr = ''
if (tagOptionKey && defaultValue) {
if (defaultValue instanceof Array) {
defaultValue.forEach(item => {
if (item) {
let labelItem = getObject(_.get(cur, tagOptionKey), 'value', item)
if (labelItem) {
labelStr += labelItem.label + ','
}
}
})
formData[cur.__vModel__] = labelStr
} else {
let { label } = _.find(_.get(cur, tagOptionKey), { 'value': defaultValue })
formData[cur.__vModel__] = label
}
}
} }
if (temConfig.children) this.initLabelFormData(temConfig.children, formData)
})
}, },
data() { initFormData (componentList, formData) {
const data = { // 设置默认值
formConfCopy: deepClone(this.formConf), componentList.forEach(cur => {
[this.formConf.formModel]: deepClone(this.formModel), const config = cur.__config__
[this.formConf.labelFormModel]: deepClone(this.labelFormModel), if (cur.__vModel__ && !formData[cur.__vModel__]) {
[this.formConf.formRules]: {}, // 如果存在分页带回的数据 则不再设置默认
// 已经被触发显示的问题 formData[cur.__vModel__] = config.defaultValue
logicTriggerItemList: []
} }
this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel]) if (config.children) this.initFormData(config.children, formData)
this.initLabelFormData(data.formConfCopy.fields, data[this.formConf.labelFormModel]) })
this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules])
return data
}, },
methods: { buildRules (componentList, rules) {
initLabelFormData(componentList, formData) { componentList.forEach(cur => {
// 获取选择项选中的显示的值 // 逻辑不显示必填问题不校验
componentList.forEach(cur => { let triggerShow = _.indexOf(this.logicTriggerItemList, cur.formItemId) > -1
let temConfig = cur.__config__ let flag = cur.logicShow || triggerShow ? '' : 'display:none'
if (cur.__vModel__ && !formData[cur.__vModel__]) { if (flag) {
let tagOptionKey = processType[temConfig.tag] return
let defaultValue = temConfig.defaultValue }
let labelStr = '' const config = cur.__config__
if (tagOptionKey && defaultValue) { if (cur.tag === 'el-upload') {
if (defaultValue instanceof Array) { config.regList.push({
defaultValue.forEach(item => { validator: () => {
if (item) { console.log(cur.limit)
let labelItem = getObject(_.get(cur, tagOptionKey), 'value', item) }, trigger: 'change'
if (labelItem) { })
labelStr += labelItem.label + ',' }
} // 处理其他输入必填校验
} const validateOtherInput = (rule, value, callback) => {
}) // 0 等于选中其他
formData[cur.__vModel__] = labelStr if (value == 0 || (Array.isArray(value) && value.includes(0))) {
} else { if (!this[this.formConf.labelFormModel][`${rule.field}other`]) {
let {label} = _.find(_.get(cur, tagOptionKey), {'value': defaultValue}) callback(new Error('请输入其他内容'))
formData[cur.__vModel__] = label } else {
} callback()
} }
} } else {
if (temConfig.children) this.initLabelFormData(temConfig.children, formData) callback()
}) }
}, }
initFormData(componentList, formData) { if (Array.isArray(config.regList)) {
// 设置默认值 // 必填其他输入框校验
componentList.forEach(cur => { if (['RADIO', 'CHECKBOX'].includes(cur.typeId)) {
const config = cur.__config__ const required = { validator: validateOtherInput, message: cur.placeholder }
if (cur.__vModel__ && !formData[cur.__vModel__]) { config.regList.push(required)
// 如果存在分页带回的数据 则不再设置默认 }
formData[cur.__vModel__] = config.defaultValue if (config.required) {
} const required = { required: config.required, message: cur.placeholder }
if (config.children) this.initFormData(config.children, formData) if (Array.isArray(config.defaultValue)) {
}) required.type = 'array'
}, required.message = `请至少选择一个${config.label}`
buildRules(componentList, rules) { }
componentList.forEach(cur => { required.message === undefined && (required.message = `${config.label}不能为空`)
// 逻辑不显示必填问题不校验 config.regList.push(required)
let triggerShow = _.indexOf(this.logicTriggerItemList, cur.formItemId) > -1 }
let flag = cur.logicShow || triggerShow ? '' : 'display:none' rules[cur.__vModel__] = config.regList.map(item => {
if (flag) { item.pattern && (item.pattern = eval(item.pattern))
return item.trigger = ruleTrigger && ruleTrigger[config.tag]
} return item
const config = cur.__config__ })
if (cur.tag === 'el-upload') {
config.regList.push({
validator: () => {
console.log(cur.limit)
}, trigger: 'change'
})
}
// 处理其他输入必填校验
const validateOtherInput = (rule, value, callback) => {
// 0 等于选中其他
if (value == 0 || (Array.isArray(value) && value.includes(0))) {
if (!this[this.formConf.labelFormModel][`${rule.field}other`]) {
callback(new Error('请输入其他内容'))
} else {
callback()
}
} else {
callback()
}
}
if (Array.isArray(config.regList)) {
// 必填其他输入框校验
if (['RADIO', 'CHECKBOX'].includes(cur.typeId)) {
const required = {validator: validateOtherInput, message: cur.placeholder}
config.regList.push(required)
}
if (config.required) {
const required = {required: config.required, message: cur.placeholder}
if (Array.isArray(config.defaultValue)) {
required.type = 'array'
required.message = `请至少选择一个${config.label}`
}
required.message === undefined && (required.message = `${config.label}不能为空`)
config.regList.push(required)
}
rules[cur.__vModel__] = config.regList.map(item => {
item.pattern && (item.pattern = eval(item.pattern))
item.trigger = ruleTrigger && ruleTrigger[config.tag]
return item
})
}
if (config.children) this.buildRules(config.children, rules)
})
},
resetForm() {
this.formConfCopy = deepClone(this.formConf)
this.$refs[this.formConf.formRef].resetFields()
},
submitForm() {
this.$refs[this.formConf.formRef].validate(valid => {
if (!valid) {
// 未选中自动高亮
// if (document.getElementsByClassName('el-form-item__error').length > 0) {
//
// }
setTimeout(() => {
let isError = document.getElementsByClassName('is-error')
isError[0].querySelector('input').focus()
}, 100)
return false
}
// 触发sumit事件
this.$emit('submit', {
formModel: this[this.formConf.formModel],
labelFormModel: this[this.formConf.labelFormModel]
})
return true
})
} }
if (config.children) this.buildRules(config.children, rules)
})
},
resetForm () {
this.formConfCopy = deepClone(this.formConf)
this.$refs[this.formConf.formRef].resetFields()
}, },
render(h) { submitForm () {
return renderFrom.call(this, h) this.$refs[this.formConf.formRef].validate(valid => {
if (!valid) {
// 未选中自动高亮
// if (document.getElementsByClassName('el-form-item__error').length > 0) {
//
// }
setTimeout(() => {
let isError = document.getElementsByClassName('is-error')
isError[0].querySelector('input').focus()
}, 100)
return false
}
// 触发sumit事件
this.$emit('submit', {
formModel: this[this.formConf.formModel],
labelFormModel: this[this.formConf.labelFormModel]
})
return true
})
} }
},
render (h) {
return renderFrom.call(this, h)
}
} }
</script> </script>
<style scoped> <style scoped>

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

@ -1256,7 +1256,7 @@ export default {
children.splice(index, 1); children.splice(index, 1);
}, },
addNode (data) { addNode (data) {
debugger
data.pid = this.currentPID data.pid = this.currentPID
this.currentNode.push(data); this.currentNode.push(data);
}, },

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

@ -18,7 +18,7 @@
<el-menu :collapse="isCollapse" <el-menu :collapse="isCollapse"
:default-active="defaultActiveMenu" :default-active="defaultActiveMenu"
class="el-menu-vertical"> class="el-menu-vertical">
<el-menu-item v-for="menuItem in (publishStatus? menuItemList2:menuItemList)" <el-menu-item v-for="menuItem in (menuItemList)"
:key="menuItem.key" :key="menuItem.key"
:index="menuItem.route" :index="menuItem.route"
@click="menuSelectHandle(menuItem.route,menuItem.key)"> @click="menuSelectHandle(menuItem.route,menuItem.key)">
@ -121,6 +121,12 @@ export default {
icon: 'el-icon-data-line', icon: 'el-icon-data-line',
route: '/project/form/statistics' route: '/project/form/statistics'
}, },
{
key: 'publish',
title: '发布',
icon: 'el-icon-video-play',
route: '/project/form/publish'
},
{ {
key: 'preview', key: 'preview',
title: '预览', title: '预览',

14
src/views/form/publish/index.vue
View File

@ -21,7 +21,7 @@
:props="props" :props="props"
:data="data" :data="data"
show-checkbox show-checkbox
:default-expand-all="true" /> :default-expand-all="false" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@ -186,7 +186,7 @@ export default {
agencyId: customerId agencyId: customerId
} }
this.$api.post(`/data/aggregator/org/agencytree`, params).then((res) => { this.$api.post(`/data/aggregator/org/agencytree`, params).then((res) => {
debugger this.data = res.data
}) })
}, },
@ -240,6 +240,16 @@ export default {
}) })
}, },
publishProject () { publishProject () {
this.resolveAgency()
if (this.selAgencyList.length === 0) {
this.$message(
{
message: "请选择发布范围",
type: 'warning'
}
)
return false
}
this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`, { key: this.projectKey }).then(() => { this.$api.post(`${process.env.VUE_APP_API_ROOT_TDUCK}/user/project/publish`, { key: this.projectKey }).then(() => {
this.publishStatus = true this.publishStatus = true

Write Preview
Loading…
Cancel
Save