123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <!-- 报告元数据文本输入类型组件 -->
- <script setup lang="ts">
- import type { ReportMetadataItem } from "@/types/report.types";
- import type { PropType } from "vue";
- const props = defineProps({
- data: {
- type: Object as PropType<ReportMetadataItem>,
- required: true,
- }
- });
- const emits = defineEmits<{
- (e: "update:data", data: ReportMetadataItem): void;
- }>();
- function onNameChange(e: InputEvent) {
- change((e.target as HTMLInputElement).value, props.data.value);
- }
- function onValueChange(e: InputEvent) {
- change(props.data.name, (e.target as HTMLInputElement).value);
- }
- function change(name: string, value: string) {
- emits("update:data", { name, value, type: props.data.type });
- }
- </script>
- <template>
- <a-row type="flex" style="align-items: center">
- <a-col class="name-wrap">
- <a-space>
- <a-input :value="data.name" @change="onNameChange" placeholder="字段名称" class="name" />
- <span>:</span>
- </a-space>
- </a-col>
- <a-col flex="1">
- <a-input :value="data.value" @change="onValueChange" placeholder="请输入字段值" class="value" />
- </a-col>
- </a-row>
- </template>
- <style scoped lang="scss">
- .name-wrap {
- width: 120px;
- .name {
- width: 100%
- }
- }
- .value {
- width: 100%;
- }
- </style>
|