76 lines
2.0 KiB
Vue
76 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<div v-for="(item, index) in componentData" :key="index">
|
|
<component :is="item.component" v-bind="item.props" :connectProps="connectProps" v-model="item.props.modelValue"></component>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,computed } from 'vue';
|
|
import InputText from '../right/InputText.vue';
|
|
import SelectBox from '../right/SelectBox.vue';
|
|
import DatePicker from '../right/DatePicker.vue';
|
|
import FieldInput from '../right/FieldInput.vue';
|
|
import EventSetter from '../right/EventSetter.vue';
|
|
import { IActionProperty, IProp } from 'src/types/ActionTypes';
|
|
export default defineComponent({
|
|
name: 'ActionProperty',
|
|
components: {
|
|
InputText,
|
|
SelectBox,
|
|
DatePicker,
|
|
FieldInput,
|
|
EventSetter
|
|
},
|
|
props: {
|
|
jsonData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
jsonValue:{
|
|
type: Object,
|
|
required: false,
|
|
}
|
|
},
|
|
setup(props){
|
|
const componentData=computed<Array<IActionProperty>>(()=>{
|
|
return props.jsonData.elements.map((element: any) => {
|
|
if(props.jsonValue != undefined )
|
|
{
|
|
if(props.jsonValue.hasOwnProperty(element.props.name))
|
|
{
|
|
element.props.modelValue = props.jsonValue[element.props.name];
|
|
}
|
|
else
|
|
{
|
|
element.props.modelValue = '';
|
|
}
|
|
}
|
|
return {
|
|
component: element.component,
|
|
props: element.props,
|
|
};
|
|
});
|
|
});
|
|
const connectProps=(props:IProp)=>{
|
|
const connProps:any={};
|
|
if(props && "connectProps" in props && props.connectProps!=undefined){
|
|
for(let connProp of props.connectProps){
|
|
let targetProp = componentData.value.find((prop)=>prop.props.name===connProp.propName);
|
|
if(targetProp){
|
|
connProps[connProp.key]=targetProp;
|
|
}
|
|
}
|
|
}
|
|
return connProps;
|
|
}
|
|
|
|
return{
|
|
componentData,
|
|
connectProps
|
|
}
|
|
}
|
|
});
|
|
</script>
|