128 lines
3.9 KiB
Vue
128 lines
3.9 KiB
Vue
|
<script>
|
||
|
|
import {createVNode, defineComponent, Fragment, shallowRef} from 'vue';
|
||
|
|
import {deepCopy} from '@form-create/utils/lib/deepextend';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'FcJson',
|
||
|
|
inheritAttrs: false,
|
||
|
|
props: {
|
||
|
|
rule: [Array, String, Object],
|
||
|
|
type: String,
|
||
|
|
disabled: Boolean,
|
||
|
|
expand: Number,
|
||
|
|
button: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
max: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
min: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
sortBtn: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
modelValue: [Object, Array],
|
||
|
|
formCreateInject: Object,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
fcSubForm: shallowRef(this.formCreateInject.form.component('fcSubForm')),
|
||
|
|
fcGroup: shallowRef(this.formCreateInject.form.component('fcGroup')),
|
||
|
|
uni: 0,
|
||
|
|
formRule: [],
|
||
|
|
formOptions: {
|
||
|
|
submitBtn: false,
|
||
|
|
resetBtn: false,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
rule() {
|
||
|
|
this.uni++;
|
||
|
|
this.loadRule();
|
||
|
|
},
|
||
|
|
type() {
|
||
|
|
this.loadRule();
|
||
|
|
},
|
||
|
|
},
|
||
|
|
render() {
|
||
|
|
if (this.rule) {
|
||
|
|
if (this.type === 'object') {
|
||
|
|
return createVNode(this.fcSubForm, {
|
||
|
|
key: 2,
|
||
|
|
...this.$attrs,
|
||
|
|
modelValue: this.modelValue,
|
||
|
|
'onUpdate:modelValue': (val) => {
|
||
|
|
this.$emit('update:modelValue', val);
|
||
|
|
},
|
||
|
|
disabled: this.disabled,
|
||
|
|
formCreateInject: this.formCreateInject,
|
||
|
|
rule: this.formRule,
|
||
|
|
options: this.formOptions,
|
||
|
|
})
|
||
|
|
} else if (this.type === 'array') {
|
||
|
|
return createVNode(this.fcGroup, {
|
||
|
|
key: 3,
|
||
|
|
...this.$attrs,
|
||
|
|
modelValue: this.modelValue,
|
||
|
|
'onUpdate:modelValue': (val) => {
|
||
|
|
this.$emit('update:modelValue', val);
|
||
|
|
},
|
||
|
|
sortBtn: this.sortBtn,
|
||
|
|
min: this.min,
|
||
|
|
max: this.max,
|
||
|
|
expand: this.expand,
|
||
|
|
button: this.button,
|
||
|
|
disabled: this.disabled,
|
||
|
|
formCreateInject: this.formCreateInject,
|
||
|
|
rule: this.formRule,
|
||
|
|
options: this.formOptions,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
return createVNode(Fragment, {
|
||
|
|
key: this.uni,
|
||
|
|
}, [this.$slots?.default?.()]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
loadRule() {
|
||
|
|
let rule = deepCopy(this.rule);
|
||
|
|
if (typeof rule === 'string') {
|
||
|
|
rule = this.formCreateInject.form.parseJson(rule);
|
||
|
|
}
|
||
|
|
if (Array.isArray(rule)) {
|
||
|
|
this.formRule = rule;
|
||
|
|
} else if (typeof rule === 'object') {
|
||
|
|
this.formRule = rule.rule || [];
|
||
|
|
this.formOptions = {
|
||
|
|
...{
|
||
|
|
submitBtn: false,
|
||
|
|
resetBtn: false,
|
||
|
|
}, ...rule.options || {}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
if (rule != null) {
|
||
|
|
if (['array', 'object'].indexOf(this.type) === -1) {
|
||
|
|
this.formCreateInject.rule.children = [
|
||
|
|
{
|
||
|
|
type: 'template',
|
||
|
|
_fc_drag_skip: true,
|
||
|
|
children: this.formRule,
|
||
|
|
}
|
||
|
|
];
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.formCreateInject.rule.children = [];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.rule && this.loadRule();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|