99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<template>
|
||
<q-field v-model="selectedField" :label="displayName" labelColor="primary"
|
||
:clearable="isSelected" stack-label :bottom-slots="!isSelected" >
|
||
<template v-slot:control >
|
||
<q-chip color="primary" text-color="white" v-if="isSelected">
|
||
{{ selectedField.name }}
|
||
</q-chip>
|
||
</template>
|
||
<!-- <template v-slot:hint v-if="isSelected">
|
||
<div> 項目コード：<q-chip size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
|
||
</template> -->
|
||
<template v-slot:hint v-if="!isSelected">
|
||
{{ placeholder }}
|
||
</template>
|
||
|
||
<template v-slot:append>
|
||
<q-icon name="search" class="cursor-pointer" color="primary" @click="showDg"/>
|
||
</template>
|
||
</q-field>
|
||
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
|
||
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
|
||
</show-dialog>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, ref ,watchEffect,computed} from 'vue';
|
||
import ShowDialog from '../ShowDialog.vue';
|
||
import FieldSelect from '../FieldSelect.vue';
|
||
import { useFlowEditorStore } from 'stores/flowEditor';
|
||
interface IField{
|
||
name:string,
|
||
code:string,
|
||
type:string
|
||
}
|
||
export default defineComponent({
|
||
name: 'FieldInput',
|
||
components: {
|
||
ShowDialog,
|
||
FieldSelect,
|
||
},
|
||
props: {
|
||
displayName:{
|
||
type: String,
|
||
default: '',
|
||
},
|
||
name:{
|
||
type: String,
|
||
default: '',
|
||
},
|
||
placeholder: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
hint:{
|
||
type: String,
|
||
default: '',
|
||
},
|
||
modelValue: {
|
||
type: Object,
|
||
default: null
|
||
},
|
||
},
|
||
|
||
setup(props, { emit }) {
|
||
const appDg = ref();
|
||
const show = ref(false);
|
||
const selectedField = ref(props.modelValue);
|
||
const store = useFlowEditorStore();
|
||
const isSelected = computed(()=>{
|
||
return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
|
||
});
|
||
|
||
const showDg = () => {
|
||
show.value = true;
|
||
};
|
||
|
||
const closeDg = (val:string) => {
|
||
if (val == 'OK') {
|
||
selectedField.value = appDg.value.selected[0];
|
||
}
|
||
};
|
||
|
||
watchEffect(() => {
|
||
emit('update:modelValue', selectedField.value);
|
||
});
|
||
|
||
return {
|
||
store,
|
||
appDg,
|
||
show,
|
||
showDg,
|
||
closeDg,
|
||
selectedField,
|
||
isSelected
|
||
};
|
||
}
|
||
});
|
||
</script>
|