elink-star
/
tduck-front
12
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
Split 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>
import {deepClone} from '@/utils/index'
import {evalExpression} from '@/utils/expression'
import { deepClone } from '@/utils/index'
import { evalExpression } from '@/utils/expression'
import render from '@/components/render/render.js'
import _ from 'lodash'
const ruleTrigger = {
'el-input': 'blur',
'el-input-number': 'blur',
'el-select': 'change',
'el-radio-group': 'change',
'el-checkbox-group': 'change',
'el-cascader': 'change',
'el-time-picker': 'change',
'el-date-picker': 'change',
'el-rate': 'change'
'el-input': 'blur',
'el-input-number': 'blur',
'el-select': 'change',
'el-radio-group': 'change',
'el-checkbox-group': 'change',
'el-cascader': 'change',
'el-time-picker': 'change',
'el-date-picker': 'change',
'el-rate': 'change'
}
const processType = {
'el-select': '__slot__.options',
'el-cascader': 'options',
'el-radio-group': '__slot__.options',
'el-checkbox-group': '__slot__.options'
'el-select': '__slot__.options',
'el-cascader': 'options',
'el-radio-group': '__slot__.options',
'el-checkbox-group': '__slot__.options'
}
const layouts = {
colFormItem(h, scheme) {
const config = scheme.__config__
const listeners = buildListeners.call(this, scheme)
const {formConfCopy} = this
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
if (config.showLabel === false) labelWidth = '0'
let label = config.label
// 显示序号
if (formConfCopy.showNumber) {
label = scheme.serialNumber + ': ' + label
}
// 分页返回上一页时把值设置回表单
let value = _.get(this[this.formConf.formModel], scheme.__vModel__)
if (value) {
config.defaultValue = value
}
// 表单被重新渲染 控制逻辑显示隐藏
let triggerShow = _.indexOf(this.logicTriggerItemList, config.formId) > -1
let colStyle = scheme.logicShow || triggerShow ? '' : 'display:none'
let cidAttr = config.formId
return (
<el-col span={config.span} style={colStyle} cid={cidAttr}>
<el-form-item label-width={labelWidth} prop={scheme.__vModel__}
label={config.showLabel ? label : ''}>
<render conf={scheme} {...{on: listeners}} />
</el-form-item>
</el-col>
)
},
rowFormItem(h, scheme) {
let child = renderChildren.apply(this, arguments)
if (scheme.type === 'flex') {
child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}>
{child}
</el-row>
}
return (
<el-col span={scheme.span}>
<el-row gutter={scheme.gutter}>
{child}
</el-row>
</el-col>
)
colFormItem (h, scheme) {
const config = scheme.__config__
const listeners = buildListeners.call(this, scheme)
const { formConfCopy } = this
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null
if (config.showLabel === false) labelWidth = '0'
let label = config.label
// 显示序号
if (formConfCopy.showNumber) {
label = scheme.serialNumber + ': ' + label
}
// 分页返回上一页时把值设置回表单
let value = _.get(this[this.formConf.formModel], scheme.__vModel__)
if (value) {
config.defaultValue = value
}
// 表单被重新渲染 控制逻辑显示隐藏
let triggerShow = _.indexOf(this.logicTriggerItemList, config.formId) > -1
let colStyle = scheme.logicShow || triggerShow ? '' : 'display:none'
let cidAttr = config.formId
return (
<el-col span={config.span} style={colStyle} cid={cidAttr}>
<el-form-item label-width={labelWidth} prop={scheme.__vModel__}
label={config.showLabel ? label : ''}>
<render conf={scheme} {...{ on: listeners }} />
</el-form-item>
</el-col>
)
},
rowFormItem (h, scheme) {
let child = renderChildren.apply(this, arguments)
if (scheme.type === 'flex') {
child = <el-row type={scheme.type} justify={scheme.justify} align={scheme.align}>
{child}
</el-row>
}
}
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-col span={scheme.span}>
<el-row gutter={scheme.gutter}>
{child}
</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
function formBtns(h) {
const {formConfCopy} = this
let style = {
'background-color': formConfCopy.submitBtnColor,
'border-color': formConfCopy.submitBtnColor
}
let btnSpan = 24
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>
}
function formBtns (h) {
const { formConfCopy } = this
let style = {
'background-color': formConfCopy.submitBtnColor,
'border-color': formConfCopy.submitBtnColor
}
let btnSpan = 24
if (formConfCopy.resetBtn) {
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-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>
<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) {
return elementList.map(scheme => {
const config = scheme.__config__
const layout = layouts[config.layout]
function renderFormItem (h, elementList) {
return elementList.map(scheme => {
const config = scheme.__config__
const layout = layouts[config.layout]
if (layout) {
return layout.call(this, h, scheme)
}
throw new Error(`没有与${config.layout}匹配的layout`)
})
if (layout) {
return layout.call(this, h, scheme)
}
throw new Error(`没有与${config.layout}匹配的layout`)
})
}
function renderChildren(h, scheme) {
const config = scheme.__config__
if (!Array.isArray(config.children)) return null
return renderFormItem.call(this, h, config.children)
function renderChildren (h, scheme) {
const config = scheme.__config__
if (!Array.isArray(config.children)) return null
return renderFormItem.call(this, h, config.children)
}
function setUpload(config, scheme, response, file) {
let newValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])
if (!newValue) {
newValue = []
}
newValue.push({fileName: file.name, url: response.data})
this.$set(config, 'defaultValue', newValue)
this.$set(this[this.formConf.formModel], scheme.__vModel__, newValue)
setValueLabel.call(this, {type: 'file', files: newValue}, config, scheme)
function setUpload (config, scheme, response, file) {
let newValue = JSON.parse(this[this.formConf.formModel][scheme.__vModel__])
if (!newValue) {
newValue = []
}
newValue.push({ fileName: file.name, url: response.data })
this.$set(config, 'defaultValue', newValue)
this.$set(this[this.formConf.formModel], scheme.__vModel__, newValue)
setValueLabel.call(this, { type: 'file', files: newValue }, config, scheme)
}
function deleteUpload(config, scheme, file, fileList) {
let newValue = []
fileList.forEach(element => {
newValue.push({fileName: element.name, url: element.url})
})
this.$set(config, 'defaultValue', newValue)
this.$set(this[this.formConf.formModel], scheme.__vModel__, newValue)
setValueLabel.call(this, {type: 'file', files: newValue}, config, scheme)
function deleteUpload (config, scheme, file, fileList) {
let newValue = []
fileList.forEach(element => {
newValue.push({ fileName: element.name, url: element.url })
})
this.$set(config, 'defaultValue', newValue)
this.$set(this[this.formConf.formModel], scheme.__vModel__, newValue)
setValueLabel.call(this, { type: 'file', files: newValue }, config, scheme)
}
function setValue(event, config, scheme) {
this.$set(config, 'defaultValue', event)
this.$set(this[this.formConf.formModel], scheme.__vModel__, event)
setValueLabel.call(this, event, config, scheme)
let logicShowRule = this.formConfCopy.logicShowRule
if (!logicShowRule) {
return
}
// 找到该问题需要触发显示的问题 判断逻辑是否成立
let rules = _.get(logicShowRule, config.formId)
if (rules && Array.isArray(rules)) {
rules.forEach(r => {
// 成立让该对应的问题显示出来
let flag = evalExpression(this[this.formConf.formModel], r.logicExpression)
if (flag) {
// 防止表单重新渲染 display被刷新
this.logicTriggerItemList.push(r.triggerFormItemId)
console.log(this.logicTriggerItemList)
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = ''
} else {
_.remove(this.logicTriggerItemList, function(n) {
return n == r.triggerFormItemId
})
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = 'none'
}
function setValue (event, config, scheme) {
this.$set(config, 'defaultValue', event)
this.$set(this[this.formConf.formModel], scheme.__vModel__, event)
setValueLabel.call(this, event, config, scheme)
let logicShowRule = this.formConfCopy.logicShowRule
if (!logicShowRule) {
return
}
// 找到该问题需要触发显示的问题 判断逻辑是否成立
let rules = _.get(logicShowRule, config.formId)
if (rules && Array.isArray(rules)) {
rules.forEach(r => {
// 成立让该对应的问题显示出来
let flag = evalExpression(this[this.formConf.formModel], r.logicExpression)
if (flag) {
// 防止表单重新渲染 display被刷新
this.logicTriggerItemList.push(r.triggerFormItemId)
console.log(this.logicTriggerItemList)
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = ''
} else {
_.remove(this.logicTriggerItemList, function (n) {
return n == r.triggerFormItemId
})
}
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = 'none'
}
})
}
}
/**
* 分页下一页
*/
function nextPage(page) {
switchPage.call(this, 'next', page)
function nextPage (page) {
switchPage.call(this, 'next', page)
}
/**
* 分页上一页
*/
function prevPage(page) {
switchPage.call(this, 'prev', page)
function prevPage (page) {
switchPage.call(this, 'prev', page)
}
/**
* 切换页
*/
function switchPage(eventName, page) {
this.$refs[this.formConf.formRef].validate(valid => {
if (!valid) {
setTimeout(() => {
let isError = document.getElementsByClassName('is-error')
isError[0].querySelector('input').focus()
}, 100)
return false
} else {
this.$emit(eventName, {
page: page,
formModel: this[this.formConf.formModel],
labelFormModel: this[this.formConf.labelFormModel]
})
}
return true
})
function switchPage (eventName, page) {
this.$refs[this.formConf.formRef].validate(valid => {
if (!valid) {
setTimeout(() => {
let isError = document.getElementsByClassName('is-error')
isError[0].querySelector('input').focus()
}, 100)
return false
} else {
this.$emit(eventName, {
page: page,
formModel: this[this.formConf.formModel],
labelFormModel: this[this.formConf.labelFormModel]
})
}
return true
})
}
/**
* radio checkbox 其他输入框值处理
*/
function setOtherValueLabel(event, config) {
let value = this[this.formConf.formModel][config.__vModel__]
// 临时保存其他的选项值
this.$nextTick(() => {
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event)
console.log(this[this.formConf.labelFormModel])
setValueLabel.call(this, value, config.__config__, config)
})
function setOtherValueLabel (event, config) {
let value = this[this.formConf.formModel][config.__vModel__]
// 临时保存其他的选项值
this.$nextTick(() => {
this.$set(this[this.formConf.labelFormModel], `${config.__vModel__}other`, event)
console.log(this[this.formConf.labelFormModel])
setValueLabel.call(this, value, config.__config__, config)
})
}
@ -253,234 +254,291 @@ function setOtherValueLabel(event, config) {
* @param config
* @param scheme
*/
function setValueLabel(event, config, scheme) {
// 需要处理的类型 如果是input等则不需要处理
let tagOptionKey = processType[config.tag]
if (tagOptionKey) {
if (event instanceof Array) {
// 多选 其他自定义输入
let labelArr = new Array()
if (!event.includes(0)) {
// 如果多选里没有选择其他，就清掉other
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '')
// 同时把输入框清空
document.querySelector('.' + config.tag).querySelector('.item-other-input').value = ''
}
event.forEach(item => {
// 拼到头部 其他选项
let {label} = getObject(_.get(scheme, tagOptionKey), 'value', item)
labelArr.push(label)
})
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelArr.join(','))
} else {
// 单选 其他自定义输入
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 = '""'
}
function setValueLabel (event, config, scheme) {
console.log(event)
console.log(config)
console.log(scheme)
// 需要处理的类型 如果是input等则不需要处理
let tagOptionKey = processType[config.tag]
if (tagOptionKey) {
if (event instanceof Array) {
// 多选 其他自定义输入
if (!event.includes(0) && config.tag != 'el-cascader') {
// 如果多选里没有选择其他，就清掉other
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '')
// 同时把输入框清空
document.querySelector('.' + config.tag).querySelector('.item-other-input').value = ''
}
// debugger
if (config.tag === 'el-cascader') {
let labelFormModelArray = []
if (scheme.props.props.multiple) {//多选
event.forEach(item => {
let itemObj = getCascaderData(item, tagOptionKey, scheme)
labelFormModelArray.push(itemObj)
})
} else {//单选
let itemObj = getCascaderData(event, tagOptionKey, scheme)
labelFormModelArray.push(itemObj)
}
} else if (config.tag === 'el-upload') {
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, event)
this.$set(this[this.formConf.labelFormModel], scheme.__vModel__, labelFormModelArray)
} 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 {
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) {
let o
array.some(function iter(a) {
if (a[key] === value) {
o = a
return true
}
return Array.isArray(a.children) && a.children.some(iter)
})
return o
function getCascaderData (array, tagOptionKey, scheme) {
let labelArr = new Array()
array.forEach(item => {
// 拼到头部 其他选项
let { label } = getObject(_.get(scheme, tagOptionKey), 'value', item)
labelArr.push(label)
})
const item = array[array.length - 1]
let itemObj = getObject(_.get(scheme, tagOptionKey), 'value', item)
itemObj.labels = labelArr
itemObj.pathName = labelArr.join(scheme.separator)
return itemObj
}
function buildListeners(scheme) {
const config = scheme.__config__
const methods = this.formConf.__methods__ || {}
const listeners = {}
function getObject (array, key, value) {
// 给__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
let o
array.some(function iter (a) {
if (a[key].isArray) {
this.getObject(a[key], key, value)
} else {
if (a[key] === value) {
o = a
return true
}
return Array.isArray(a.children) && a.children.some(iter)
}
})
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 {
components: {
render
components: {
render
},
props: {
formConf: {
type: Object,
required: true
},
props: {
formConf: {
type: Object,
required: true
},
formModel: {
type: Object,
required: false
},
labelFormModel: {
type: Object,
required: false
formModel: {
type: Object,
required: false
},
labelFormModel: {
type: Object,
required: false
}
},
data () {
const data = {
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() {
const data = {
formConfCopy: deepClone(this.formConf),
[this.formConf.formModel]: deepClone(this.formModel),
[this.formConf.labelFormModel]: deepClone(this.labelFormModel),
[this.formConf.formRules]: {},
// 已经被触发显示的问题
logicTriggerItemList: []
initFormData (componentList, formData) {
// 设置默认值
componentList.forEach(cur => {
const config = cur.__config__
if (cur.__vModel__ && !formData[cur.__vModel__]) {
// 如果存在分页带回的数据 则不再设置默认
formData[cur.__vModel__] = config.defaultValue
}
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
if (config.children) this.initFormData(config.children, formData)
})
},
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)
})
},
initFormData(componentList, formData) {
// 设置默认值
componentList.forEach(cur => {
const config = cur.__config__
if (cur.__vModel__ && !formData[cur.__vModel__]) {
// 如果存在分页带回的数据 则不再设置默认
formData[cur.__vModel__] = config.defaultValue
}
if (config.children) this.initFormData(config.children, formData)
})
},
buildRules(componentList, rules) {
componentList.forEach(cur => {
// 逻辑不显示必填问题不校验
let triggerShow = _.indexOf(this.logicTriggerItemList, cur.formItemId) > -1
let flag = cur.logicShow || triggerShow ? '' : 'display:none'
if (flag) {
return
}
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
})
buildRules (componentList, rules) {
componentList.forEach(cur => {
// 逻辑不显示必填问题不校验
let triggerShow = _.indexOf(this.logicTriggerItemList, cur.formItemId) > -1
let flag = cur.logicShow || triggerShow ? '' : 'display:none'
if (flag) {
return
}
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()
},
render(h) {
return renderFrom.call(this, h)
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
})
}
},
render (h) {
return renderFrom.call(this, h)
}
}
</script>
<style scoped>

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

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

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

@ -18,7 +18,7 @@
<el-menu :collapse="isCollapse"
:default-active="defaultActiveMenu"
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"
:index="menuItem.route"
@click="menuSelectHandle(menuItem.route,menuItem.key)">
@ -121,6 +121,12 @@ export default {
icon: 'el-icon-data-line',
route: '/project/form/statistics'
},
{
key: 'publish',
title: '发布',
icon: 'el-icon-video-play',
route: '/project/form/publish'
},
{
key: 'preview',
title: '预览',

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

@ -21,7 +21,7 @@
:props="props"
:data="data"
show-checkbox
:default-expand-all="true" />
:default-expand-all="false" />
</el-form-item>
</el-form>
</div>
@ -186,7 +186,7 @@ export default {
agencyId: customerId
}
this.$api.post(`/data/aggregator/org/agencytree`, params).then((res) => {
debugger
this.data = res.data
})
},
@ -240,6 +240,16 @@ export default {
})
},
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.publishStatus = true

Write Preview
Loading…
Cancel
Save