bugfix: 编辑时无法回显用户邮箱

src/component/Administrator/subscriptionPlan.vue

@@ -245,7 +245,7 @@
               Admin Account:
               <span>*</span>
             </span>
-            <SelectUser v-model="formState.adminAccId" labelKey="email" />
+            <SelectUser ref="userRef" v-model="formState.adminAccId" labelKey="email" />
           </div>
           <div class="admin_state_item">
             <span>
@@ -403,8 +403,6 @@ import type { FormInstance, Rule } from 'ant-design-vue/es/form'
 import { debounce } from 'lodash-es'
 import dayjs, { Dayjs } from 'dayjs'
 
-const testuser = ref('')
-
 type PlanStatus = 'PENDING' | 'ACTIVE' | 'EXPIRED'
 interface SubscriptionPlan {
   id: number
@@ -425,6 +423,7 @@ const disabledDate = (current: Dayjs) => {
 }
 
 const countryList = ref([])
+const userRef = ref(null)
 
 const searchForm = reactive({
   name: '',
@@ -667,7 +666,6 @@ const openEdit = (record: SubscriptionPlan) => {
         String(org.id) === String(record.organizationId)
     )
     if (!orgExists) {
-      // 从表格数据中获取组织名称，如果存在则添加临时项
       const orgName = (record as any).organizationName
       if (orgName) {
         organizationOptions.value = [
@@ -680,6 +678,16 @@ const openEdit = (record: SubscriptionPlan) => {
       }
     }
   }
+  if (record.adminAccId) {
+    console.log(userRef.value)
+    nextTick(() => {
+      userRef.value.patchList({
+        label: record.name,
+        value: record.adminAccId,
+        email: record.adminAccEmail
+      })
+    })
+  }
 
   modalVisible.value = true
 }

src/component/common/SelectUser.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, reactive } from 'vue'
+import { computed, ref, reactive ,defineExpose} from 'vue'
 import { debounce } from 'lodash-es'
 import { Https } from '@/tool/https'
 import { useStore } from '@/store'
@@ -94,6 +94,21 @@ const doFetch = async (reset = false) => {
     })
     const data = res?.data
     pager.hasMore = res?.hasMore
+    if (tempItem.value.value) {
+      const exists = data.find(
+        it =>
+          (props.valueKey ? it[props.valueKey] : it.value) ===
+          (props.valueKey ? tempItem.value[props.valueKey] : tempItem.value.value)
+      )
+      if (!!exists) {
+        // 如果存在,用data中的新数据覆盖internalList中的旧数据
+        const index = internalList.value.indexOf(tempItem.value)
+        const existsIndex = data.indexOf(exists)
+        internalList.value[index] = { ...exists }
+        data.splice(existsIndex, 1)
+        tempItem.value = {}
+      }
+    }
     if (pager.page === 1) internalList.value = data
     else internalList.value = internalList.value.concat(data)
     pager.page += 1
@@ -129,6 +144,24 @@ const handleFocus = () => {
 const onChange = (val: any) => {
   emit('change', val)
 }
+
+// 解决回显时没有加载对应选项的问题
+const tempItem = ref({})
+const patchList = item => {
+  const exists = internalList.value.find(
+    it =>
+      (props.valueKey ? it[props.valueKey] : it.value) ===
+      (props.valueKey ? item[props.valueKey] : item.value)
+  )
+  if (!exists) {
+    internalList.value.unshift({ ...item, temp: true })
+    tempItem.value = item
+  }
+}
+
+defineExpose({
+  patchList
+})
 </script>
 
 <style lang="less" scoped></style>