97 lines
2.5 KiB
Vue
97 lines
2.5 KiB
Vue
<template>
|
|
<div class="q-pa-md q-gutter-sm">
|
|
<q-btn label="プロパティ" icon="keyboard_arrow_right" color="primary" @click="open('right')" />
|
|
<!-- <q-btn label="Readプロパティ" icon="keyboard_arrow_right" color="primary" @click="write('right')" /> -->
|
|
|
|
<q-dialog v-model="dialog" :position="position">
|
|
<q-card class="column full-height" style="width: 300px">
|
|
<q-card-section>
|
|
<div class="text-h6">プロパティ</div>
|
|
</q-card-section>
|
|
|
|
|
|
<q-card-section class="col q-pt-none">
|
|
<ActionProperty :jsonData="jsonData" :jsonValue="jsonValue"/>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right" class="bg-white text-teal">
|
|
<q-btn flat label="Save" v-close-popup @click="save"/>
|
|
<q-btn flat label="Cancel" v-close-popup />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref,onMounted } from 'vue'
|
|
import ActionProperty from 'components/right/ActionProperty.vue';
|
|
const dialog = ref(false)
|
|
const position = ref('top')
|
|
|
|
const jsonData = {
|
|
elements: [
|
|
{
|
|
component: 'InputText',
|
|
props: {
|
|
name:'1',
|
|
placeholder: 'Enter some text',
|
|
modelValue: '',
|
|
},
|
|
},
|
|
{
|
|
component: 'SelectBox',
|
|
props: {
|
|
name:'2',
|
|
placeholder: 'Choose an option',
|
|
modelValue: '',
|
|
options: [
|
|
'option1',
|
|
'option2',
|
|
'option3'
|
|
],
|
|
},
|
|
},
|
|
{
|
|
component: 'DatePicker',
|
|
props: {
|
|
name:'3',
|
|
placeholder: 'Choose a date',
|
|
modelValue: '',
|
|
},
|
|
},
|
|
{
|
|
component: 'FieldInput',
|
|
props: {
|
|
name:'4',
|
|
placeholder: 'Choose a field',
|
|
modelValue: '',
|
|
},
|
|
},
|
|
]
|
|
};
|
|
|
|
let jsonValue = {
|
|
1:'abc',
|
|
2:'option2',
|
|
3:'2023/09/04',
|
|
4:'6666'
|
|
};
|
|
|
|
const open = (pos:string) => {
|
|
position.value = pos
|
|
dialog.value = true
|
|
};
|
|
|
|
const save = async () =>{
|
|
|
|
jsonData.elements.forEach(property => {
|
|
if(jsonValue != undefined)
|
|
{
|
|
jsonValue[property.props.name] = property.props.modelValue;
|
|
}
|
|
});
|
|
console.log(jsonValue);
|
|
|
|
}
|
|
</script>
|