修改LogisticsWaySelect组件兼容单选

src/views/logistics/components/LogisticsWaySelect.tsx

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

src/views/logistics/logisticsMethod.vue

@@ -422,8 +422,9 @@ const formConfig = computed<IFormConfig[]>(() => [
                 ]}
               >
                 <LogisticsWaySelect
-                  v-model={item.logisticsName}
-                  companyList={tiktokCarriers.value}
+                  v-model={item.logisticsName as string | number}
+                  isRadio={true}
+                  companyList={tiktokCarriers.value as ICompanyList[]}
                 ></LogisticsWaySelect>
               </el-form-item>
             ) : (
@@ -450,14 +451,14 @@ const formConfig = computed<IFormConfig[]>(() => [
             <div style="display: flex;flex:17%">
               {(formData?.platformList as platformObj[])?.length - 1 ===
                 index && (
-                  <el-button
-                    style="margin-left: 10px"
-                    type="primary"
-                    onClick={() => addCol()}
-                  >
-                    新增
-                  </el-button>
-                )}
+                <el-button
+                  style="margin-left: 10px"
+                  type="primary"
+                  onClick={() => addCol()}
+                >
+                  新增
+                </el-button>
+              )}
               {index >= 1 && (
                 <el-button
                   style="margin-left: 10px"
@@ -880,15 +881,16 @@ const tiktokCarriers = ref<ICompanyList[]>([])
  */
 async function getTiktokCarriers() {
   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({
       warehouseName: label,
-      wayList: data.filter(e => e.label === label)
+      wayList: data.filter((e) => e.label === label),
     })
   })
   tiktokCarriers.value = result
+  console.log(893, tiktokCarriers.value)
 }
 
 /**