ReportMetaTextInput.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!-- 报告元数据文本输入类型组件 -->
  2. <script setup lang="ts">
  3. import type { ReportMetadataItem } from "@/types/report.types";
  4. import type { PropType } from "vue";
  5. const props = defineProps({
  6. data: {
  7. type: Object as PropType<ReportMetadataItem>,
  8. required: true,
  9. }
  10. });
  11. const emits = defineEmits<{
  12. (e: "update:data", data: ReportMetadataItem): void;
  13. }>();
  14. function onNameChange(e: InputEvent) {
  15. change((e.target as HTMLInputElement).value, props.data.value);
  16. }
  17. function onValueChange(e: InputEvent) {
  18. change(props.data.name, (e.target as HTMLInputElement).value);
  19. }
  20. function change(name: string, value: string) {
  21. emits("update:data", { name, value, type: props.data.type });
  22. }
  23. </script>
  24. <template>
  25. <a-row type="flex" style="align-items: center">
  26. <a-col class="name-wrap">
  27. <a-space>
  28. <a-input :value="data.name" @change="onNameChange" placeholder="字段名称" class="name" />
  29. <span>:</span>
  30. </a-space>
  31. </a-col>
  32. <a-col flex="1">
  33. <a-input :value="data.value" @change="onValueChange" placeholder="请输入字段值" class="value" />
  34. </a-col>
  35. </a-row>
  36. </template>
  37. <style scoped lang="scss">
  38. .name-wrap {
  39. width: 120px;
  40. .name {
  41. width: 100%
  42. }
  43. }
  44. .value {
  45. width: 100%;
  46. }
  47. </style>