|
|
@ -1,6 +1,6 @@ |
|
|
|
<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' |
|
|
|
|
|
|
@ -24,10 +24,10 @@ const processType = { |
|
|
|
} |
|
|
|
|
|
|
|
const layouts = { |
|
|
|
colFormItem(h, scheme) { |
|
|
|
colFormItem (h, scheme) { |
|
|
|
const config = scheme.__config__ |
|
|
|
const listeners = buildListeners.call(this, scheme) |
|
|
|
const {formConfCopy} = this |
|
|
|
const { formConfCopy } = this |
|
|
|
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null |
|
|
|
if (config.showLabel === false) labelWidth = '0' |
|
|
|
let label = config.label |
|
|
@ -48,12 +48,12 @@ const layouts = { |
|
|
|
<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}} /> |
|
|
|
<render conf={scheme} {...{ on: listeners }} /> |
|
|
|
</el-form-item> |
|
|
|
</el-col> |
|
|
|
) |
|
|
|
}, |
|
|
|
rowFormItem(h, scheme) { |
|
|
|
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}> |
|
|
@ -70,8 +70,8 @@ const layouts = { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function renderFrom(h) { |
|
|
|
const {formConfCopy} = this |
|
|
|
function renderFrom (h) { |
|
|
|
const { formConfCopy } = this |
|
|
|
|
|
|
|
return ( |
|
|
|
<el-row gutter={formConfCopy.gutter}> |
|
|
@ -82,7 +82,7 @@ function renderFrom(h) { |
|
|
|
label-width={`${formConfCopy.labelWidth}px`} |
|
|
|
ref={formConfCopy.formRef} |
|
|
|
// model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664 |
|
|
|
props={{model: this[formConfCopy.formModel]}} |
|
|
|
props={{ model: this[formConfCopy.formModel] }} |
|
|
|
rules={this[formConfCopy.formRules]} |
|
|
|
> |
|
|
|
{renderFormItem.call(this, h, formConfCopy.fields)} |
|
|
@ -93,8 +93,8 @@ function renderFrom(h) { |
|
|
|
} |
|
|
|
|
|
|
|
// eslint-disable-next-line no-unused-vars |
|
|
|
function formBtns(h) { |
|
|
|
const {formConfCopy} = this |
|
|
|
function formBtns (h) { |
|
|
|
const { formConfCopy } = this |
|
|
|
let style = { |
|
|
|
'background-color': formConfCopy.submitBtnColor, |
|
|
|
'border-color': formConfCopy.submitBtnColor |
|
|
@ -127,7 +127,7 @@ function formBtns(h) { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function renderFormItem(h, elementList) { |
|
|
|
function renderFormItem (h, elementList) { |
|
|
|
return elementList.map(scheme => { |
|
|
|
const config = scheme.__config__ |
|
|
|
const layout = layouts[config.layout] |
|
|
@ -139,34 +139,34 @@ function renderFormItem(h, elementList) { |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
function renderChildren(h, scheme) { |
|
|
|
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) { |
|
|
|
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}) |
|
|
|
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) |
|
|
|
setValueLabel.call(this, { type: 'file', files: newValue }, config, scheme) |
|
|
|
} |
|
|
|
|
|
|
|
function deleteUpload(config, scheme, file, fileList) { |
|
|
|
function deleteUpload (config, scheme, file, fileList) { |
|
|
|
let newValue = [] |
|
|
|
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(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(this[this.formConf.formModel], scheme.__vModel__, event) |
|
|
|
setValueLabel.call(this, event, config, scheme) |
|
|
@ -186,7 +186,7 @@ function setValue(event, config, scheme) { |
|
|
|
console.log(this.logicTriggerItemList) |
|
|
|
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = '' |
|
|
|
} else { |
|
|
|
_.remove(this.logicTriggerItemList, function(n) { |
|
|
|
_.remove(this.logicTriggerItemList, function (n) { |
|
|
|
return n == r.triggerFormItemId |
|
|
|
}) |
|
|
|
document.querySelector(`div[cid="${r.triggerFormItemId}"]`).style.display = 'none' |
|
|
@ -198,21 +198,21 @@ function setValue(event, config, scheme) { |
|
|
|
/** |
|
|
|
* 分页下一页 |
|
|
|
*/ |
|
|
|
function nextPage(page) { |
|
|
|
function nextPage (page) { |
|
|
|
switchPage.call(this, 'next', page) |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 分页上一页 |
|
|
|
*/ |
|
|
|
function prevPage(page) { |
|
|
|
function prevPage (page) { |
|
|
|
switchPage.call(this, 'prev', page) |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 切换页 |
|
|
|
*/ |
|
|
|
function switchPage(eventName, page) { |
|
|
|
function switchPage (eventName, page) { |
|
|
|
this.$refs[this.formConf.formRef].validate(valid => { |
|
|
|
if (!valid) { |
|
|
|
setTimeout(() => { |
|
|
@ -234,7 +234,8 @@ function switchPage(eventName, page) { |
|
|
|
/** |
|
|
|
* radio checkbox 其他输入框值处理 |
|
|
|
*/ |
|
|
|
function setOtherValueLabel(event, config) { |
|
|
|
function setOtherValueLabel (event, config) { |
|
|
|
|
|
|
|
let value = this[this.formConf.formModel][config.__vModel__] |
|
|
|
// 临时保存其他的选项值 |
|
|
|
this.$nextTick(() => { |
|
|
@ -253,35 +254,68 @@ function setOtherValueLabel(event, config) { |
|
|
|
* @param config |
|
|
|
* @param scheme |
|
|
|
*/ |
|
|
|
function setValueLabel(event, config, scheme) { |
|
|
|
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) { |
|
|
|
// 多选 其他自定义输入 |
|
|
|
let labelArr = new Array() |
|
|
|
if (!event.includes(0)) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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) |
|
|
|
|
|
|
|
} |
|
|
|
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) |
|
|
|
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 { |
|
|
|
// 单选 其他自定义输入 |
|
|
|
if (event == 0) { |
|
|
|
console.log(this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) |
|
|
|
// 如果选择了其他,把label存在field字段,把输入框内容存在fieldother字段 |
|
|
|
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__}other`, this[this.formConf.labelFormModel][`${scheme.__vModel__}other`]) |
|
|
|
} 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) |
|
|
|
// 如果没有选择其他,就清掉other |
|
|
|
this.$set(this[this.formConf.labelFormModel], `${scheme.__vModel__}other`, '') |
|
|
@ -296,19 +330,43 @@ function setValueLabel(event, config, scheme) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function getObject(array, key, value) { |
|
|
|
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 getObject (array, key, value) { |
|
|
|
|
|
|
|
let o |
|
|
|
array.some(function iter(a) { |
|
|
|
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) { |
|
|
|
function buildListeners (scheme) { |
|
|
|
const config = scheme.__config__ |
|
|
|
const methods = this.formConf.__methods__ || {} |
|
|
|
const listeners = {} |
|
|
@ -345,7 +403,7 @@ export default { |
|
|
|
required: false |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
data () { |
|
|
|
const data = { |
|
|
|
formConfCopy: deepClone(this.formConf), |
|
|
|
[this.formConf.formModel]: deepClone(this.formModel), |
|
|
@ -360,7 +418,7 @@ export default { |
|
|
|
return data |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initLabelFormData(componentList, formData) { |
|
|
|
initLabelFormData (componentList, formData) { |
|
|
|
// 获取选择项选中的显示的值 |
|
|
|
componentList.forEach(cur => { |
|
|
|
let temConfig = cur.__config__ |
|
|
@ -380,7 +438,7 @@ export default { |
|
|
|
}) |
|
|
|
formData[cur.__vModel__] = labelStr |
|
|
|
} else { |
|
|
|
let {label} = _.find(_.get(cur, tagOptionKey), {'value': defaultValue}) |
|
|
|
let { label } = _.find(_.get(cur, tagOptionKey), { 'value': defaultValue }) |
|
|
|
formData[cur.__vModel__] = label |
|
|
|
} |
|
|
|
} |
|
|
@ -388,7 +446,7 @@ export default { |
|
|
|
if (temConfig.children) this.initLabelFormData(temConfig.children, formData) |
|
|
|
}) |
|
|
|
}, |
|
|
|
initFormData(componentList, formData) { |
|
|
|
initFormData (componentList, formData) { |
|
|
|
// 设置默认值 |
|
|
|
componentList.forEach(cur => { |
|
|
|
const config = cur.__config__ |
|
|
@ -399,7 +457,7 @@ export default { |
|
|
|
if (config.children) this.initFormData(config.children, formData) |
|
|
|
}) |
|
|
|
}, |
|
|
|
buildRules(componentList, rules) { |
|
|
|
buildRules (componentList, rules) { |
|
|
|
componentList.forEach(cur => { |
|
|
|
// 逻辑不显示必填问题不校验 |
|
|
|
let triggerShow = _.indexOf(this.logicTriggerItemList, cur.formItemId) > -1 |
|
|
@ -431,11 +489,11 @@ export default { |
|
|
|
if (Array.isArray(config.regList)) { |
|
|
|
// 必填其他输入框校验 |
|
|
|
if (['RADIO', 'CHECKBOX'].includes(cur.typeId)) { |
|
|
|
const required = {validator: validateOtherInput, message: cur.placeholder} |
|
|
|
const required = { validator: validateOtherInput, message: cur.placeholder } |
|
|
|
config.regList.push(required) |
|
|
|
} |
|
|
|
if (config.required) { |
|
|
|
const required = {required: config.required, message: cur.placeholder} |
|
|
|
const required = { required: config.required, message: cur.placeholder } |
|
|
|
if (Array.isArray(config.defaultValue)) { |
|
|
|
required.type = 'array' |
|
|
|
required.message = `请至少选择一个${config.label}` |
|
|
@ -452,11 +510,11 @@ export default { |
|
|
|
if (config.children) this.buildRules(config.children, rules) |
|
|
|
}) |
|
|
|
}, |
|
|
|
resetForm() { |
|
|
|
resetForm () { |
|
|
|
this.formConfCopy = deepClone(this.formConf) |
|
|
|
this.$refs[this.formConf.formRef].resetFields() |
|
|
|
}, |
|
|
|
submitForm() { |
|
|
|
submitForm () { |
|
|
|
this.$refs[this.formConf.formRef].validate(valid => { |
|
|
|
if (!valid) { |
|
|
|
// 未选中自动高亮 |
|
|
@ -478,7 +536,7 @@ export default { |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
render(h) { |
|
|
|
render (h) { |
|
|
|
return renderFrom.call(this, h) |
|
|
|
} |
|
|
|
} |
|
|
|