|
|
@@ -1,6 +1,6 @@
|
|
|
<script setup lang="ts">
|
|
|
import { ChapterType, ChapterTypeLabels } from "@/types/report.types";
|
|
|
-import { ref, type Ref } from "vue";
|
|
|
+import { ref } from "vue";
|
|
|
|
|
|
defineProps({
|
|
|
visible: {
|
|
|
@@ -12,13 +12,24 @@ defineProps({
|
|
|
|
|
|
const emits = defineEmits<{
|
|
|
(e: "update:visible", visible: boolean): void;
|
|
|
- (e: "ok", vaule: ChapterType): void;
|
|
|
+ (e: "ok", vaule: ChapterType[]): void;
|
|
|
}>();
|
|
|
|
|
|
-const category: Ref<ChapterType> = ref(ChapterType.UNKNOWN);
|
|
|
+const categoryOptions = ChapterTypeLabels.map((item) => ({
|
|
|
+ label: item.label,
|
|
|
+ value: item.key
|
|
|
+}))
|
|
|
+
|
|
|
+const checkedCategories = ref<ChapterType[]>([]);
|
|
|
|
|
|
function onOk() {
|
|
|
- emits("ok", category.value);
|
|
|
+ let values: ChapterType[] = [];
|
|
|
+ for (let item of categoryOptions) {
|
|
|
+ if (checkedCategories.value.find(x => x == item.value)) {
|
|
|
+ values.push(item.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ emits("ok", values);
|
|
|
emits("update:visible", false);
|
|
|
reset();
|
|
|
}
|
|
|
@@ -29,7 +40,7 @@ function onCancel() {
|
|
|
}
|
|
|
|
|
|
function reset() {
|
|
|
- category.value = ChapterType.UNKNOWN;
|
|
|
+ checkedCategories.value = [];
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -37,21 +48,20 @@ function reset() {
|
|
|
<a-modal
|
|
|
:visible="visible"
|
|
|
title="选择章节类型"
|
|
|
- :ok-button-props="{ disabled: category == ChapterType.UNKNOWN }"
|
|
|
+ :ok-button-props="{ disabled: checkedCategories.length == 0 }"
|
|
|
@ok="onOk"
|
|
|
@cancel="onCancel"
|
|
|
>
|
|
|
- <a-radio-group v-model:value="category">
|
|
|
- <a-radio class="radio" :value="item.key" v-for="(item, index) in ChapterTypeLabels" :key="index">
|
|
|
- {{ item.label }}
|
|
|
- </a-radio>
|
|
|
- </a-radio-group>
|
|
|
+ <a-checkbox-group v-model:value="checkedCategories" name="checkboxgroup">
|
|
|
+ <div v-for="(item, index) in categoryOptions" :key="index" class="category-item">
|
|
|
+ <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
|
|
|
+ </div>
|
|
|
+ </a-checkbox-group>
|
|
|
</a-modal>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.radio {
|
|
|
- display: flex;
|
|
|
+.category-item {
|
|
|
height: 2em;
|
|
|
line-height: 2em;
|
|
|
}
|