<script>
|
import render from "@/components/FormGenerator/components/render/render.js";
|
|
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",
|
};
|
|
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>
|
);
|
}
|
|
function formBtns(h) {
|
return (
|
<el-col>
|
<el-form-item size="mini" labelWidth={this.labelWidth}>
|
<el-button type="primary" onClick={this.submitForm}>
|
提交
|
</el-button>
|
</el-form-item>
|
</el-col>
|
);
|
}
|
|
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`);
|
});
|
}
|
|
function renderChildren(h, scheme) {
|
const config = scheme.__config__;
|
if (!Array.isArray(config.children)) return null;
|
return renderFormItem.call(this, h, config.children);
|
}
|
|
function setValue(event, config, scheme) {
|
this.$set(config, "defaultValue", event);
|
this.$set(this[this.formConf.formModel], scheme.__vModel__, event);
|
}
|
|
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);
|
|
return listeners;
|
}
|
const layouts = {
|
colFormItem(h, scheme) {
|
const config = scheme.__config__;
|
const listeners = buildListeners.call(this, scheme);
|
let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null;
|
if (config.showLabel === false) labelWidth = "0";
|
if (config.tips && !config.tipsIsLink) {
|
return (
|
<el-col span={config.span}>
|
<el-form-item
|
label-width={labelWidth}
|
prop={scheme.__vModel__}
|
label={config.showLabel ? config.label : ""}
|
>
|
<el-tooltip
|
effect="dark"
|
placement="top-start"
|
style="padding:10px 5px 0 0;"
|
>
|
<i class="el-icon-warning-outline" /> {" "}
|
<div slot="content" style="max-width:400px;">
|
{config.tipsDesc}
|
</div>
|
|
</el-tooltip>
|
<render conf={scheme} {...{ on: listeners }} />
|
</el-form-item>
|
</el-col>
|
);
|
} else if (config.tips && config.tipsIsLink) {
|
return (
|
<el-col span={config.span}>
|
<el-form-item
|
label-width={labelWidth}
|
prop={scheme.__vModel__}
|
label={config.showLabel ? config.label : ""}
|
>
|
<el-tooltip
|
effect="dark"
|
placement="top-start"
|
style="padding:10px 5px 0 0;"
|
>
|
<i class="el-icon-warning-outline" /> {" "}
|
<div slot="content" style="max-width:400px;">
|
<a href={config.tipsLink} target="_blank">
|
{config.tipsDesc}
|
</a>
|
</div>
|
|
</el-tooltip>
|
<render conf={scheme} {...{ on: listeners }} />
|
</el-form-item>
|
</el-col>
|
);
|
} else {
|
return (
|
<el-col span={config.span}>
|
<el-form-item
|
label-width={labelWidth}
|
prop={scheme.__vModel__}
|
label={config.showLabel ? config.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>
|
);
|
},
|
};
|
|
export default {
|
components: {
|
render,
|
},
|
props: {
|
formConf: {
|
type: Object,
|
required: true,
|
},
|
formEditData: {
|
type: Object,
|
},
|
isEdit: {
|
type: Boolean,
|
default: false,
|
},
|
labelWidth: {
|
type: String,
|
default: "100px",
|
},
|
},
|
data() {
|
if (this.isEdit) {
|
// 初始化待编辑数据
|
this.formConf.fields.forEach((conf) => {
|
// 设置现有的数据
|
const hasValueForEdit = this.formEditData[conf.__vModel__];
|
if (hasValueForEdit) {
|
conf.__config__.defaultValue = hasValueForEdit;
|
}
|
// 如果是el-select标签 判断数据后改变实现默认选中效果
|
if (
|
conf.__config__.tag === "el-select" ||
|
conf.__config__.tag === "el-radio-group"
|
) {
|
const perValue = conf.__slot__.options.filter(
|
(option) => option.value == this.formEditData[conf.__vModel__]
|
);
|
if (perValue.length > 0) {
|
// 有表单数据
|
conf.__config__.defaultValue = perValue[0].value;
|
}
|
}
|
});
|
}
|
const data = {
|
formConfCopy: JSON.parse(JSON.stringify(this.formConf)),
|
[this.formConf.formModel]: {},
|
[this.formConf.formRules]: {},
|
};
|
this.initFormData(data.formConfCopy.fields, data[this.formConf.formModel]);
|
this.buildRules(data.formConfCopy.fields, data[this.formConf.formRules]);
|
return data;
|
},
|
methods: {
|
initFormData(componentList, formData) {
|
componentList.forEach((cur) => {
|
const config = cur.__config__;
|
if (cur.__vModel__) formData[cur.__vModel__] = config.defaultValue;
|
if (config.children) this.initFormData(config.children, formData);
|
});
|
},
|
buildRules(componentList, rules) {
|
componentList.forEach((cur) => {
|
const config = cur.__config__;
|
if (Array.isArray(config.regList)) {
|
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.$emit("resetForm", this.formConf);
|
this.formConfCopy = JSON.parse(JSON.stringify(this.formConf));
|
this.$refs[this.formConf.formRef].resetFields();
|
},
|
submitForm() {
|
this.$refs[this.formConf.formRef].validate((valid) => {
|
if (!valid) return false;
|
// 触发sumit事件
|
this.$emit("submit", this[this.formConf.formModel]);
|
return true;
|
});
|
},
|
},
|
render(h) {
|
return renderFrom.call(this, h);
|
},
|
};
|
</script>
|
