BlockRepeatTask.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <div :id="componentId" class="p-4 repeat-task">
  3. <div class="flex items-center mb-2">
  4. <div
  5. :class="block.category.color"
  6. class="inline-block text-sm mr-4 p-2 rounded-lg dark:text-black"
  7. >
  8. <v-remixicon name="riRepeat2Line" size="20" class="inline-block mr-1" />
  9. <span>{{ t('workflow.blocks.repeat-task.name') }}</span>
  10. </div>
  11. <div class="flex-grow"></div>
  12. <v-remixicon
  13. v-if="!editor.minimap"
  14. name="riDeleteBin7Line"
  15. class="cursor-pointer"
  16. @click="editor.removeNodeId(`node-${block.id}`)"
  17. />
  18. </div>
  19. <label
  20. class="mb-2 block bg-input focus-within:bg-input pr-4 transition rounded-lg"
  21. >
  22. <input
  23. :value="block.data.repeatFor || 0"
  24. min="0"
  25. class="pl-4 py-2 bg-transparent rounded-l-lg w-24 mr-2"
  26. type="number"
  27. required
  28. @input="handleInput"
  29. />
  30. <span class="text-gray-600 dark:text-gray-200">
  31. {{ t('workflow.blocks.repeat-task.times') }}
  32. </span>
  33. </label>
  34. <p class="text-right text-gray-600 dark:text-gray-200">
  35. {{ t('workflow.blocks.repeat-task.repeatFrom') }}
  36. </p>
  37. </div>
  38. </template>
  39. <script setup>
  40. import { useI18n } from 'vue-i18n';
  41. import emitter from '@/lib/mitt';
  42. import { useComponentId } from '@/composable/componentId';
  43. import { useEditorBlock } from '@/composable/editorBlock';
  44. const { t } = useI18n();
  45. const props = defineProps({
  46. editor: {
  47. type: Object,
  48. default: () => ({}),
  49. },
  50. });
  51. const componentId = useComponentId('block-delay');
  52. const block = useEditorBlock(`#${componentId}`, props.editor);
  53. function handleInput({ target }) {
  54. target.reportValidity();
  55. const repeatFor = +target.value || 0;
  56. if (repeatFor < 0) return;
  57. props.editor.updateNodeDataFromId(block.id, { repeatFor });
  58. emitter.emit('editor:data-changed', block.id);
  59. }
  60. </script>
  61. <style>
  62. .drawflow .repeat-task .outputs {
  63. top: 74px !important;
  64. transform: none !important;
  65. }
  66. .drawflow .repeat-task .output {
  67. margin-bottom: 22px;
  68. }
  69. </style>