修改LogisticsWaySelect组件兼容单选

src/views/logistics/components/LogisticsWaySelect.tsx

@@ -4,6 +4,8 @@ import {
   ElScrollbar,
   ElScrollbar,
   ElCheckbox,
   ElCheckbox,
   ElCheckboxGroup,
   ElCheckboxGroup,
+  ElRadioGroup,
+  ElRadio,
   ElInput,
   ElInput,
 } from 'element-plus'
 } from 'element-plus'
 
 
@@ -35,41 +37,60 @@ interface IwayList {
   id: string
   id: string
 }
 }
 interface IAllList {
 interface IAllList {
-  factoryId: number
+  factoryId?: number
   id: number
   id: number
   name: string
   name: string
-  serviceCode: string
-  siteUrl: string
-  status: number
-  uinuinWarehouseId: number | null
-  updateTime: string
-  warehouseId: number
-  warehouseName: string
+  serviceCode?: string
+  siteUrl?: string
+  status?: number
+  uinuinWarehouseId?: number | null
+  updateTime?: string
+  warehouseId?: number
+  warehouseName?: string
+  wayList?: IwayList[]
 }
 }
 export default defineComponent({
 export default defineComponent({
   name: 'CustomizeForm',
   name: 'CustomizeForm',
   props: {
   props: {
     modelValue: {
     modelValue: {
-      type: Array as PropType<(string | number)[]>,
+      type: [Array, String, Number] as PropType<
+        (string | number)[] | string | number
+      >,
       default: () => [],
       default: () => [],
+      // 可选：添加自定义验证器确保类型安全
+      validator: (value: unknown) => {
+        return (
+          Array.isArray(value) ||
+          typeof value === 'string' ||
+          typeof value === 'number'
+        )
+      },
     },
     },
     companyList: {
     companyList: {
-      type: Array as PropType<IAllList[]>,
+      type: Array as PropType<IAllList[] | ICompanyList[]>,
       default: () => [],
       default: () => [],
     },
     },
+    isRadio: {
+      type: Boolean,
+      default: false,
+    },
   },
   },
   emits: ['update:modelValue'],
   emits: ['update:modelValue'],
   setup(props, { emit }) {
   setup(props, { emit }) {
     const companyList = ref<ICompanyList[]>([])
     const companyList = ref<ICompanyList[]>([])
     const allList = ref<IAllList[]>([])
     const allList = ref<IAllList[]>([])
     const selectedList = ref<(string | number)[]>([])
     const selectedList = ref<(string | number)[]>([])
-
+    const selectedRadioList = ref<string | number>()
     const waysName = ref('')
     const waysName = ref('')
-
+    const selectedRadioName = ref('')
     watch(
     watch(
       () => props.modelValue,
       () => props.modelValue,
       (newVal) => {
       (newVal) => {
-        selectedList.value = newVal
+        if (props.isRadio) {
+          selectedRadioList.value = newVal as string | number
+        } else {
+          selectedList.value = newVal as (string | number)[]
+        }
       },
       },
       {
       {
         immediate: true,
         immediate: true,
@@ -78,14 +99,24 @@ export default defineComponent({
     )
     )
 
 
     watch(
     watch(
-      [() => selectedList.value, () => props.companyList],
+      [
+        () => selectedList.value,
+        () => props.companyList,
+        () => selectedRadioList.value,
+      ],
       (newVal) => {
       (newVal) => {
+        console.log(90, newVal)
+        if (props.isRadio) {
+          emit('update:modelValue', newVal[2])
+          companyList.value = newVal[1] as ICompanyList[]
+          waysName.value = selectedRadioName.value
+        } else {
           emit('update:modelValue', newVal[0])
           emit('update:modelValue', newVal[0])
-        allList.value = newVal[1]
-        companyList.value = transformData(newVal[1])
+          allList.value = newVal[1] as IAllList[]
+          companyList.value = transformData(newVal[1] as IAllList[])
 
 
           if (newVal[1]?.length) {
           if (newVal[1]?.length) {
-          waysName.value = newVal[1]
+            waysName.value = (newVal[1] as IAllList[])
               .filter((item) => {
               .filter((item) => {
                 if (newVal[0].includes(item.id)) {
                 if (newVal[0].includes(item.id)) {
                   return item.name
                   return item.name
@@ -96,6 +127,7 @@ export default defineComponent({
             // emit('waysName', res)
             // emit('waysName', res)
             console.log(87, waysName.value)
             console.log(87, waysName.value)
           }
           }
+        }
       },
       },
       { deep: true, immediate: true },
       { deep: true, immediate: true },
     )
     )
@@ -173,6 +205,7 @@ export default defineComponent({
             <div class="companyBox" key={index}>
             <div class="companyBox" key={index}>
               <div style={styles.titleBox}>
               <div style={styles.titleBox}>
                 <div class="title">{company.warehouseName}</div>
                 <div class="title">{company.warehouseName}</div>
+                {!props.isRadio && (
                   <ElCheckbox
                   <ElCheckbox
                     modelValue={getCompanySelectedStatus.value(company)}
                     modelValue={getCompanySelectedStatus.value(company)}
                     onChange={(v) => setCheckAll(company, v as boolean)}
                     onChange={(v) => setCheckAll(company, v as boolean)}
@@ -180,8 +213,32 @@ export default defineComponent({
                   >
                   >
                     全选
                     全选
                   </ElCheckbox>
                   </ElCheckbox>
+                )}
               </div>
               </div>
-
+              {props.isRadio ? (
+                <ElRadioGroup
+                  modelValue={selectedRadioList.value}
+                  onUpdate:modelValue={(value) => {
+                    console.log('company', value)
+                    selectedRadioList.value = value as string | number
+                    selectedRadioName.value = company.wayList.find(
+                      (el) => el.id === value,
+                    )?.name as string
+                  }}
+                  style={styles.checkboxGroup}
+                >
+                  {company.wayList?.map((item) => (
+                    <ElRadio
+                      label={item.name}
+                      value={item.id}
+                      key={`item-${item.id}`}
+                      class="radioItem"
+                    >
+                      {item.name}
+                    </ElRadio>
+                  ))}
+                </ElRadioGroup>
+              ) : (
                 <ElCheckboxGroup
                 <ElCheckboxGroup
                   modelValue={selectedList.value}
                   modelValue={selectedList.value}
                   onUpdate:modelValue={(value) => (selectedList.value = value)}
                   onUpdate:modelValue={(value) => (selectedList.value = value)}
@@ -196,6 +253,7 @@ export default defineComponent({
                     />
                     />
                   ))}
                   ))}
                 </ElCheckboxGroup>
                 </ElCheckboxGroup>
+              )}
             </div>
             </div>
           ))}
           ))}
         </ElScrollbar>
         </ElScrollbar>

src/views/logistics/logisticsMethod.vue

@@ -422,8 +422,9 @@ const formConfig = computed<IFormConfig[]>(() => [
                 ]}
                 ]}
               >
               >
                 <LogisticsWaySelect
                 <LogisticsWaySelect
-                  v-model={item.logisticsName}
-                  companyList={tiktokCarriers.value}
+                  v-model={item.logisticsName as string | number}
+                  isRadio={true}
+                  companyList={tiktokCarriers.value as ICompanyList[]}
                 ></LogisticsWaySelect>
                 ></LogisticsWaySelect>
               </el-form-item>
               </el-form-item>
             ) : (
             ) : (
@@ -880,15 +881,16 @@ const tiktokCarriers = ref<ICompanyList[]>([])
  */
  */
 async function getTiktokCarriers() {
 async function getTiktokCarriers() {
   const { data } = await getTiktokCarrier()
   const { data } = await getTiktokCarrier()
-  const labelTypeList = Array.from(new Set(data.map(e => e.label)))
-  const result:ICompanyList[] = []
-  labelTypeList.forEach(label => {
+  const labelTypeList = Array.from(new Set(data.map((e) => e.label)))
+  const result: ICompanyList[] = []
+  labelTypeList.forEach((label) => {
     result.push({
     result.push({
       warehouseName: label,
       warehouseName: label,
-      wayList: data.filter(e => e.label === label)
+      wayList: data.filter((e) => e.label === label),
     })
     })
   })
   })
   tiktokCarriers.value = result
   tiktokCarriers.value = result
+  console.log(893, tiktokCarriers.value)
 }
 }
 
 
 /**
 /**