feat: 商品编辑

src/views/SellerDashboard/MyListings/EditDetail/components/Radio.vue

@@ -8,7 +8,7 @@
 				'radio-button',
 				{
 					'is-active': multiple
-						? selectedValues.includes(item.key)
+						? selectedValues.includes(normalizeValue(item.key))
 						: modelValue === item.key
 				}
 			]"
@@ -20,54 +20,73 @@
 </template>
 
 <script setup lang="ts">
-	import { computed } from "vue"
+import { computed } from "vue"
 
-	interface Option {
-		name: string | number
-		value: string | number | boolean
-		key: string
-		optype: boolean
+interface Option {
+	name: string | number
+	value: string | number | boolean
+	key: string
+	optype: boolean
+}
+
+const props = defineProps<{
+	modelValue:
+		| string
+		| number
+		| boolean
+		| Array<string | number | boolean | null | undefined>
+		| null
+	options: Option[] // 按钮选项数组
+	multiple?: boolean // 是否支持多选，默认为 false
+}>()
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: any): void
+}>()
+
+const multiple = props.multiple === true
+
+const normalizeValue = (value: any) =>
+	typeof value === "string" ? value.toLocaleLowerCase() : value
+
+const selectedValues = computed(() => {
+	if (!multiple) {
+		return typeof props.modelValue === "undefined" || props.modelValue === null
+			? []
+			: [props.modelValue]
 	}
 
-	const props = defineProps<{
-		modelValue: string | number | boolean | Array<string | number | boolean> | null
-		options: Option[] // 按钮选项数组
-		multiple?: boolean // 是否支持多选，默认为 false
-	}>()
+	return Array.isArray(props.modelValue)
+		? props.modelValue
+				.filter((value) => value !== null && typeof value !== "undefined")
+				.map(normalizeValue)
+		: []
+})
 
-	const emit = defineEmits<{
-		(e: "update:modelValue", value: any): void
-	}>()
+const selectOption = (value: any) => {
+	if (multiple) {
+		const selectedValue = normalizeValue(value)
+		const current = Array.isArray(props.modelValue)
+			? props.modelValue
+					.filter((item) => item !== null && typeof item !== "undefined")
+					.map(normalizeValue)
+			: []
+		const index = current.indexOf(selectedValue)
 
-	const multiple = props.multiple === true
-
-	const selectedValues = computed(() => {
-		if (!multiple) {
-			return typeof props.modelValue === "undefined" || props.modelValue === null
-				? []
-				: [props.modelValue]
+		if (index >= 0) {
+			current.splice(index, 1)
+		} else {
+			current.push(selectedValue)
 		}
 
-		return Array.isArray(props.modelValue) ? props.modelValue : []
-	})
-
-	const selectOption = (value: any) => {
-		if (multiple) {
-			const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-			const index = current.indexOf(value)
-			if (index >= 0) {
-				current.splice(index, 1)
-			} else {
-				current.push(value.toLocaleLowerCase)
-			}
-			emit("update:modelValue", current)
-			return
-		}
-
-		if (props.modelValue !== value) {
-			emit("update:modelValue", value)
-		}
+		emit("update:modelValue", current.length ? current : null)
+		return
 	}
+
+	if (props.modelValue !== value) {
+		emit("update:modelValue", value)
+	}
+}
 </script>
 
 <style lang="less" scoped>