KintoneAppBuilder/frontend/src/components/ConditionEditor/ConditionObject.vue

<template>
    <q-field labelColor="primary" class="condition-object" dense outlined :label="label" :disable="disabled"
      :clearable="isSelected">
      <template v-slot:control>
        <q-chip  color="primary" text-color="white" v-if="isSelected && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
          {{ selectedObject.name }}
        </q-chip>
        <q-chip  color="info" text-color="white" v-if="isSelected && selectedObject.objectType==='variable'" :dense="true" class="selected-obj">
          {{ selectedObject.name.name }}
        </q-chip>
        <div v-if="isSelected && selectedObject.objectType==='text'">{{ selectedObject?.sharedText }}</div>
      </template>
      <template v-slot:append>
        <q-icon name="search" class="cursor-pointer" @click="showDg" />
      </template>
    </q-field>
    <show-dialog v-model:visible="show" name="設定項目" @close="closeDg" min-width="400px">
      <!-- <template v-slot:toolbar>
          <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
            <template v-slot:before>
              <q-icon name="search" />
            </template>
          </q-input>
      </template>
      <condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
    -->
      <DynamicItemInput v-model:selectedObject="selectedObject" :canInput="config.canInput"
        :buttonsConfig="config.buttonsConfig" :appId="store.appInfo?.appId" :options="options" ref="inputRef" />

  </show-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watchEffect, computed ,PropType} from 'vue';
import ShowDialog from '../ShowDialog.vue';
// import ConditionObjects from '../ConditionObjects.vue';
import DynamicItemInput from '../DynamicItemInput/DynamicItemInput.vue';
import { useFlowEditorStore } from '../../stores/flowEditor';
import { IActionFlow, IActionNode, IActionVariable } from '../../types/ActionTypes';
import { IDynamicInputConfig } from 'src/types/ComponentTypes';


export default defineComponent({
  name: 'ConditionObject',
  components: {
    ShowDialog,
    DynamicItemInput,
    // ConditionObjects
  },
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: undefined
    },
    config: {
      type: Object as PropType<IDynamicInputConfig>,
      default: () => {
        return {
          canInput: false,
          buttonsConfig: [
            { label: 'フィールド', color: 'primary', type: 'FieldAdd' },
            { label: '変数', color: 'green', type: 'VariableAdd' },
          ]
        };
      }
    },

    options:
    {
      type:Array as PropType< string[]>,
      default:()=>[]
    },
    modelValue: {
      type: Object,
      default: null
    },
  },
  setup(props, { emit }) {
    // const appDg = ref();
    const inputRef=ref();
    const show = ref(false);
    const selectedObject = ref(props.modelValue);
    const store = useFlowEditorStore();
    // const sharedText = ref(''); // 共享的文本状态
    const isSelected = computed(() => {
      return selectedObject.value?.sharedText !== '';
    });
    // const isSelected = computed(()=>{
    //   return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
    // });
    let vars: IActionVariable[] = [];
    if (store.currentFlow !== undefined && store.activeNode !== undefined) {
      vars = store.currentFlow.getVarNames(store.activeNode);
    }
    // const filter=ref('');
    const showDg = () => {
      show.value = true;
    };

    const closeDg = (val: string) => {
      if (val == 'OK') {
        // selectedObject.value = appDg.value.selected[0];
        selectedObject.value = inputRef.value.selectedObjectRef
      }
    };

    watchEffect(() => {
      emit('update:modelValue', selectedObject.value);
    });

    return {
      inputRef,
      store,
      // appDg,
      show,
      showDg,
      closeDg,
      selectedObject,
      vars: reactive(vars),
      isSelected,
      buttonsConfig: [
        { label: 'フィールド', color: 'primary', type: 'FieldAdd' },
        { label: '変数', color: 'green', type: 'VariableAdd' },
      ]
      // filter
    };
  }
});
</script>
<style lang="scss">
.condition-object {
  min-width: 200px;
  max-height: 40px;
  margin: 0 2px;
}

.selected-obj {
  margin: 0 2px;
}
</style>