|
|
@@ -1,7 +1,7 @@
|
|
|
<!-- 报告元数据,封面上的动态字段 -->
|
|
|
<script setup lang="ts">
|
|
|
import { defineAsyncComponent, ref, markRaw, type Ref, type PropType, onMounted } from "vue";
|
|
|
-import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
|
|
|
+import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons-vue';
|
|
|
import draggable from 'vuedraggable'
|
|
|
|
|
|
import type ReportMetaTextInput from './ReportMetaTextInput.vue';
|
|
|
@@ -29,7 +29,6 @@ const emits = defineEmits<{
|
|
|
}>();
|
|
|
|
|
|
function addTextComponent(index: number, prop: ReportMetadataItem = { name: '', value: '', type: 'text' }) {
|
|
|
- // prop = prop || { name: '', value: '', type: 'text' }
|
|
|
dynamicComponents.value.push({
|
|
|
id: index,
|
|
|
component: markRaw(defineAsyncComponent(() => import('./ReportMetaTextInput.vue') )),
|
|
|
@@ -38,7 +37,6 @@ function addTextComponent(index: number, prop: ReportMetadataItem = { name: '',
|
|
|
}
|
|
|
|
|
|
function addDateComponent(index: number, prop: ReportMetadataItem = { name: '', value: '', type: 'date' }) {
|
|
|
- // prop = prop || { name: '', value: '', type: 'date' }
|
|
|
dynamicComponents.value.push({
|
|
|
id: index,
|
|
|
component: markRaw(defineAsyncComponent(() => import('./ReportMetaDateInput.vue') )),
|
|
|
@@ -46,12 +44,22 @@ function addDateComponent(index: number, prop: ReportMetadataItem = { name: '',
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+function addDateRangeComponent(index: number, prop: ReportMetadataItem = { name: '', value: '', type: 'dateRange' }) {
|
|
|
+ dynamicComponents.value.push({
|
|
|
+ id: index,
|
|
|
+ component: markRaw(defineAsyncComponent(() => import('./ReportMetaDateRangeInput.vue') )),
|
|
|
+ prop
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
function handleMenuClick(e: {key: string}) {
|
|
|
const index = dynamicComponents.value.length+1;
|
|
|
if (e.key == 'text') {
|
|
|
addTextComponent(index);
|
|
|
} else if (e.key === 'date') {
|
|
|
addDateComponent(index);
|
|
|
+ } else if (e.key === 'dateRange') {
|
|
|
+ addDateRangeComponent(index);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -80,6 +88,8 @@ onMounted(() => {
|
|
|
addTextComponent(index, metadataItem);
|
|
|
} else if (metadataItem.type == 'date') {
|
|
|
addDateComponent(index, metadataItem);
|
|
|
+ } else if (metadataItem.type == 'dateRange') {
|
|
|
+ addDateRangeComponent(index, metadataItem);
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -100,7 +110,7 @@ onMounted(() => {
|
|
|
</a-col>
|
|
|
<a-col>
|
|
|
<a-button type="text" @click="deleteComponent(index)">
|
|
|
- <template #icon><delete-outlined /></template>
|
|
|
+ <template #icon><minus-circle-outlined /></template>
|
|
|
</a-button>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
@@ -111,6 +121,7 @@ onMounted(() => {
|
|
|
<a-menu @click="handleMenuClick">
|
|
|
<a-menu-item key="text">文本项</a-menu-item>
|
|
|
<a-menu-item key="date">日期项</a-menu-item>
|
|
|
+ <a-menu-item key="dateRange">日期范围项</a-menu-item>
|
|
|
</a-menu>
|
|
|
</template>
|
|
|
<a-button>
|