153 lines
4.9 KiB
Vue
153 lines
4.9 KiB
Vue
<template>
|
|
<div class="q-my-md" v-bind="$attrs">
|
|
<q-card flat>
|
|
<q-card-section class="q-pa-none q-my-sm q-mr-md">
|
|
<!-- <div class=" q-my-none ">App Field Select</div> -->
|
|
<div class="row q-mb-xs">
|
|
<div class="text-primary q-mb-xs text-caption">{{ $props.displayName }}</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="q-mb-xs">{{ selectedField.app?.name || '未選択' }}</div>
|
|
</div>
|
|
<div class="col-1">
|
|
<q-btn round flat size="sm" color="primary" icon="search" @click="showDg" />
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-section class="q-pa-none q-ma-none">
|
|
<div style="">
|
|
<div v-if="selectedField.fields && selectedField.fields.length > 0">
|
|
<q-list bordered>
|
|
<q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator
|
|
v-slot="{ item, index }">
|
|
<q-item :key="index" dense clickable>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
{{ item.label }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-virtual-scroll>
|
|
</q-list>
|
|
</div>
|
|
<!-- <div v-else class="row q-mt-lg">
|
|
</div> -->
|
|
</div>
|
|
<!-- <q-separator /> -->
|
|
</q-card-section>
|
|
<q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length === 0">
|
|
<div class="row">
|
|
<div class="text-grey text-caption"> {{ $props.placeholder }}</div>
|
|
<!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeAFBox">
|
|
<AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" ref="afBox"/>
|
|
</show-dialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, watchEffect } from 'vue';
|
|
import AppFieldSelectBox from '../AppFieldSelectBox.vue';
|
|
import ShowDialog from '../ShowDialog.vue';
|
|
import { useFlowEditorStore } from 'stores/flowEditor';
|
|
|
|
export interface IApp {
|
|
id: string,
|
|
name: string
|
|
}
|
|
export interface IField {
|
|
name: string,
|
|
code: string,
|
|
type: string
|
|
}
|
|
|
|
export interface IAppFields {
|
|
app?: IApp,
|
|
fields: IField[]
|
|
}
|
|
|
|
export default defineComponent({
|
|
inheritAttrs: false,
|
|
name: 'AppFieldSelect',
|
|
components: {
|
|
ShowDialog,
|
|
AppFieldSelectBox
|
|
},
|
|
props: {
|
|
displayName: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
modelValue: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
selectType: {
|
|
type: String,
|
|
default: 'single'
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const show = ref(false);
|
|
const afBox = ref();
|
|
const selectedField = ref<IAppFields>({
|
|
app: undefined,
|
|
fields: []
|
|
});
|
|
if (props.modelValue && 'app' in props.modelValue && 'fields' in props.modelValue) {
|
|
selectedField.value = props.modelValue as IAppFields;
|
|
}
|
|
const store = useFlowEditorStore();
|
|
|
|
const clear = () => {
|
|
selectedField.value = {
|
|
fields: []
|
|
};
|
|
}
|
|
|
|
const removeField = (index: number) => {
|
|
selectedField.value.fields.splice(index, 1);
|
|
}
|
|
|
|
const closeAFBox = (val: string) => {
|
|
if (val == 'OK') {
|
|
console.log(afBox.value);
|
|
|
|
selectedField.value = afBox.value.selField;
|
|
}
|
|
};
|
|
|
|
watchEffect(() => {
|
|
emit('update:modelValue', selectedField.value);
|
|
});
|
|
|
|
return {
|
|
store,
|
|
afBox,
|
|
show,
|
|
showDg: () => { show.value = true },
|
|
selectedField,
|
|
clear,
|
|
removeField,
|
|
closeAFBox,
|
|
};
|
|
}
|
|
});
|
|
</script>
|