fix：修改物流方式回显问题

src/views/logistics/components/LogisticsWaySelect.tsx

@@ -26,6 +26,11 @@ const styles = {
     flexWrap: 'wrap',
     backgroundColor: '#efefef',
   },
+
+  checkbox: {
+    width: '33.3333%',
+    'margin-right': '0px !important',
+  },
 } as const
 
 interface ICompanyList {
@@ -78,11 +83,13 @@ export default defineComponent({
   emits: ['update:modelValue'],
   setup(props, { emit }) {
     const companyList = ref<ICompanyList[]>([])
+    const templeCompanyList = ref<ICompanyList[] | IwayList[] | IAllList[]>([])
     const allList = ref<IAllList[]>([])
+    const allWayLists = ref<IwayList[]>([])
     const selectedList = ref<(string | number)[]>([])
     const selectedRadioList = ref<string | number>()
     const waysName = ref('')
-
+    const searchName = ref('')
     watch(
       () => props.modelValue,
       (newVal) => {
@@ -107,16 +114,17 @@ export default defineComponent({
         () => selectedRadioList.value,
       ],
       (newVal) => {
-        console.log(90, newVal)
+        // console.log(90, newVal)
         if (props.isRadio) {
           emit('update:modelValue', newVal[2])
           companyList.value = newVal[1] as ICompanyList[]
-          const allWayLists: IwayList[] = props.companyList.flatMap(
+          allWayLists.value = props.companyList.flatMap(
             (company) => company.wayList,
           ) as IwayList[]
 
           waysName.value =
-            allWayLists.find((el: IwayList) => newVal[2] === el.id)?.name || ''
+            allWayLists.value.find((el: IwayList) => newVal[2] === el.id)
+              ?.name || ''
         } else {
           emit('update:modelValue', newVal[0])
           allList.value = newVal[1] as IAllList[]
@@ -132,7 +140,7 @@ export default defineComponent({
               .map((item) => item.name)
               .join(',')
             // emit('waysName', res)
-            console.log(87, waysName.value)
+            // console.log(87, waysName.value)
           }
         }
       },
@@ -166,6 +174,31 @@ export default defineComponent({
       return (company: ICompanyList) => statusMap.get(company.warehouseName)
     })
 
+    function fuzzySearch<T>(
+      items: T[],
+      searchTerm: string,
+      key: keyof T = 'name' as keyof T,
+    ): T[] {
+      // 空搜索返回所有元素
+      if (!searchTerm.trim()) {
+        return [...items]
+      }
+
+      // 将搜索词转为小写（不区分大小写）
+      const searchLower = searchTerm.toLowerCase()
+
+      return items.filter((item) => {
+        // 获取属性值
+        const value = item[key]
+
+        // 确保属性值存在且为字符串
+        if (typeof value !== 'string') return false
+
+        // 将属性值转为小写并检查是否包含搜索词
+        return value.toLowerCase().includes(searchLower)
+      })
+    }
+
     function transformData(data: IAllList[]) {
       const warehouseMap = new Map()
       for (const item of data) {
@@ -193,10 +226,13 @@ export default defineComponent({
 
     return () => (
       <ElPopover
-        width="650px"
+        width="750px"
         placement="bottom-start"
         trigger="click"
         popper-style={{ padding: 0 }}
+        onUpdate:visible={(value) => {
+          if (value) searchName.value = ''
+        }}
         v-slots={{
           reference: () => (
             <ElInput
@@ -207,59 +243,128 @@ export default defineComponent({
           ),
         }}
       >
-        <ElScrollbar class="scroll-container" maxHeight="450px">
-          {companyList.value.map((company, index) => (
-            <div class="companyBox" key={index}>
-              <div style={styles.titleBox}>
-                <div class="title">{company.warehouseName}</div>
-                {!props.isRadio && (
-                  <ElCheckbox
-                    modelValue={getCompanySelectedStatus.value(company)}
-                    onChange={(v) => setCheckAll(company, v as boolean)}
-                    class="selectAll"
+        <ElInput
+          modelValue={searchName.value}
+          onUpdate:modelValue={(value) => {
+            if (props.isRadio) {
+              templeCompanyList.value = fuzzySearch(allWayLists.value, value)
+            } else {
+              templeCompanyList.value = fuzzySearch(allList.value, value)
+            }
+            console.log('templeCompanyList', templeCompanyList.value)
+            searchName.value = value
+          }}
+          clearable
+          style={{ width: '200px', padding: '10px' }}
+          placeholder="请搜索承运商"
+        />
+        <ElScrollbar
+          class="scroll-container"
+          maxHeight="450px"
+          style={{ 'border-top': '1px solid #eee' }}
+        >
+          {!searchName.value ? (
+            companyList.value.map((company, index) => (
+              <div class="companyBox" key={index}>
+                <div style={styles.titleBox}>
+                  <div class="title">{company.warehouseName}</div>
+                  {!props.isRadio && (
+                    <ElCheckbox
+                      modelValue={getCompanySelectedStatus.value(
+                        company as ICompanyList,
+                      )}
+                      onChange={(v) =>
+                        setCheckAll(company as ICompanyList, 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
+                    }}
+                    style={styles.checkboxGroup}
                   >
-                    全选
-                  </ElCheckbox>
+                    {company.wayList?.map((item) => (
+                      <div title={item.name} style={styles.checkbox}>
+                        <ElRadio
+                          label={item.name}
+                          value={item.id}
+                          key={`item-${item.id}`}
+                        >
+                          {item.name}
+                        </ElRadio>
+                      </div>
+                    ))}
+                  </ElRadioGroup>
+                ) : (
+                  <ElCheckboxGroup
+                    modelValue={selectedList.value}
+                    onUpdate:modelValue={(value) =>
+                      (selectedList.value = value)
+                    }
+                    style={styles.checkboxGroup}
+                  >
+                    {(company as ICompanyList).wayList.map((item) => (
+                      <div title={item.name} style={styles.checkbox}>
+                        <ElCheckbox
+                          label={item.name}
+                          value={item.id}
+                          key={`item-${item.id}`}
+                          class="checkboxItem"
+                        />
+                      </div>
+                    ))}
+                  </ElCheckboxGroup>
                 )}
               </div>
-              {props.isRadio ? (
-                <ElRadioGroup
-                  modelValue={selectedRadioList.value}
-                  onUpdate:modelValue={(value) => {
-                    console.log('company', value)
-                    selectedRadioList.value = value as string | number
-                  }}
-                  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>
-          ))}
+            ))
+          ) : props.isRadio ? (
+            <ElRadioGroup
+              modelValue={selectedRadioList.value}
+              onUpdate:modelValue={(value) => {
+                console.log('company', value)
+                selectedRadioList.value = value as string | number
+              }}
+              style={styles.checkboxGroup}
+            >
+              {(templeCompanyList.value as IwayList[]).map((item) => (
+                <div title={item.name} style={styles.checkbox}>
+                  <ElRadio
+                    label={item.name}
+                    value={item.id}
+                    key={`item-${item.id}`}
+                  >
+                    {item.name}
+                  </ElRadio>
+                </div>
+              ))}
+            </ElRadioGroup>
+          ) : (
+            <ElCheckboxGroup
+              modelValue={selectedList.value}
+              onUpdate:modelValue={(value) => (selectedList.value = value)}
+              style={styles.checkboxGroup}
+            >
+              {(templeCompanyList.value as IwayList[]).map((item) => (
+                <div title={item.name} style={styles.checkbox}>
+                  <ElCheckbox
+                    label={item.name}
+                    value={item.id}
+                    key={`item-${item.id}`}
+                    class="checkboxItem"
+                  />
+                </div>
+              ))}
+            </ElCheckboxGroup>
+          )}
         </ElScrollbar>
       </ElPopover>
     )

src/views/logistics/logisticsMethod.vue

@@ -185,6 +185,45 @@ const platformList = ref([])
 const ruleNameList = ref([])
 const uniuniList = ref([])
 const logisticsCompanyList = ref([])
+
+watch(
+  () => JSON.parse(JSON.stringify(editForm.value.platformList)),
+  (newValue, oldValue) => {
+    if (oldValue.length && newValue.length) {
+      // 遍历旧值数组
+      oldValue.forEach(
+        (
+          oldItem: { logisticsName: string; showPlatform: string[] },
+          index: number,
+        ) => {
+          // 检查旧值项是否符合条件
+          if (
+            Array.isArray(oldItem.showPlatform) &&
+            oldItem.showPlatform.length === 1 &&
+            oldItem.showPlatform[0] === 'TIKTOK' &&
+            oldItem.logisticsName
+          ) {
+            // 获取对应的新值项
+            const newItem = newValue[index]
+
+            // 检查新值项是否不再满足条件
+            if (
+              newItem &&
+              (!Array.isArray(newItem.showPlatform) ||
+                newItem.showPlatform.length === 0 ||
+                !newItem.showPlatform.includes('TIKTOK') ||
+                newItem.showPlatform.length > 1)
+            ) {
+              // 清除 logisticsName
+              editForm.value.platformList[index].logisticsName = ''
+            }
+          }
+        },
+      )
+    }
+  },
+  { deep: true },
+)
 const formConfig = computed<IFormConfig[]>(() => [
   { title: '物流基础信息' },
   {
@@ -373,9 +412,7 @@ const formConfig = computed<IFormConfig[]>(() => [
   {
     title: '平台物流名称',
     fixed: 'last',
-    render: (item, formData) => {
-      console.log(283, item, formData)
-
+    render: (_, formData) => {
       return (formData?.platformList as platformObj[])?.map(
         (item: platformObj, index: number) => (
           <div style="display: flex; width:100%">