feat: 完善迁移记录筛选选择器

src/components/admin/UserGoodsSelectorPopup.vue

@@ -0,0 +1,64 @@
+<template>
+  <el-dialog v-model="visible" title="选择用户商品" width="780px" append-to-body destroy-on-close @close="handleClose">
+    <div class="selector-toolbar">
+      <el-input v-model.trim="keyword" placeholder="搜索商品名称、备注或 ID" clearable @keyup.enter="handleSearch" @clear="handleSearch">
+        <template #prefix><el-icon><Search /></el-icon></template>
+      </el-input>
+      <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
+      <el-button :icon="Refresh" @click="handleReset">重置</el-button>
+    </div>
+    <el-alert v-if="userId" :title="`仅显示用户 #${userId} 的商品`" type="info" :closable="false" show-icon class="user-alert" />
+    <el-table :data="list" v-loading="loading" highlight-current-row stripe height="340" @current-change="selected = $event">
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column label="商品" min-width="180" show-overflow-tooltip>
+        <template #default="{ row }">{{ goodsName(row) }}</template>
+      </el-table-column>
+      <el-table-column label="用户" min-width="140" show-overflow-tooltip>
+        <template #default="{ row }">{{ userName(row) }} <span class="muted">#{{ row.user_id || row.userId || '-' }}</span></template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="100"><template #default="{ row }">{{ row.status || '-' }}</template></el-table-column>
+      <el-table-column prop="note" label="备注" min-width="140" show-overflow-tooltip><template #default="{ row }">{{ row.note || '-' }}</template></el-table-column>
+    </el-table>
+    <el-empty v-if="!loading && !list.length" description="暂无用户商品" :image-size="60" />
+    <div class="pagination"><span v-if="selected">已选：{{ goodsName(selected) }} (#{{ selected.id }})</span><el-pagination v-model:current-page="page" v-model:page-size="count" :page-sizes="[10,20,50]" :total="total" layout="total,sizes,prev,pager,next" small @current-change="loadList" @size-change="handleSizeChange" /></div>
+    <template #footer><el-button @click="handleClose">取消</el-button><el-button type="primary" :disabled="!selected" @click="handleConfirm">确定选择</el-button></template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { Search, Refresh } from '@element-plus/icons-vue'
+import { getUserGoodsList } from '@/api/admin/userVm'
+
+const props = defineProps({ modelValue: { type: Boolean, default: false }, userId: { type: Number, default: 0 }, currentId: { type: Number, default: 0 } })
+const emit = defineEmits(['update:modelValue', 'confirm'])
+const visible = ref(false), loading = ref(false), list = ref([]), selected = ref(null), keyword = ref(''), page = ref(1), count = ref(10), total = ref(0)
+const goodsName = row => row?.good?.name || row?.good_name || row?.name || `用户商品 #${row?.id || '-'}`
+const userName = row => row?.user?.user_name || row?.user_name || '-'
+watch(() => props.modelValue, value => { visible.value = value; if (value) { selected.value = null; page.value = 1; loadList() } })
+watch(visible, value => emit('update:modelValue', value))
+const loadList = async () => {
+  loading.value = true
+  try {
+    const params = { page: page.value, count: count.value }
+    if (keyword.value) params.key = keyword.value
+    if (props.userId) params.user_id = props.userId
+    const res = await getUserGoodsList(params)
+    if (res?.data?.code === 200) {
+      const data = res.data.data || {}
+      list.value = data.data || (Array.isArray(data) ? data : [])
+      total.value = data.meta?.count ?? data.all_count ?? data.total ?? list.value.length
+      selected.value = list.value.find(row => Number(row.id) === Number(props.currentId)) || null
+    } else { list.value = []; total.value = 0 }
+  } catch { list.value = []; total.value = 0 } finally { loading.value = false }
+}
+const handleSearch = () => { page.value = 1; loadList() }
+const handleReset = () => { keyword.value = ''; page.value = 1; loadList() }
+const handleSizeChange = () => { page.value = 1; loadList() }
+const handleClose = () => { visible.value = false }
+const handleConfirm = () => { if (selected.value) { emit('confirm', selected.value); handleClose() } }
+</script>
+
+<style scoped>
+.selector-toolbar{display:flex;gap:8px;margin-bottom:12px}.selector-toolbar .el-input{max-width:360px}.user-alert{margin-bottom:12px}.pagination{display:flex;align-items:center;justify-content:space-between;min-height:32px;margin-top:12px;color:#606266;font-size:13px}.muted{color:#909399;font-size:12px}
+</style>

src/views/virtualization/VmMigrationRecord.vue

@@ -10,6 +10,11 @@
 
     <el-card shadow="never" class="filter-card">
       <el-form :inline="true" :model="filters">
+        <el-form-item label="关键词">
+          <el-input v-model.trim="filters.keyword" clearable placeholder="虚拟机、IP、宿主机、备注、任务或错误" style="width:300px" @keyup.enter="search" @clear="search">
+            <template #prefix><el-icon><Search /></el-icon></template>
+          </el-input>
+        </el-form-item>
         <el-form-item label="当前服务方向" v-if="embedded && serviceId">
           <el-segmented v-model="serviceDirection" :options="[{ label: '作为源端', value: 'source' }, { label: '作为目标端', value: 'target' }]" @change="search" />
         </el-form-item>
@@ -26,8 +31,12 @@
         </el-form-item>
         <el-form-item label="链路 ID"><el-input v-model.trim="filters.chain_id" clearable placeholder="chain_id" style="width:210px" /></el-form-item>
         <el-form-item label="任务 ID"><el-input v-model.trim="filters.task_id" clearable placeholder="task_id" style="width:210px" /></el-form-item>
-        <el-form-item label="用户 ID"><el-input-number v-model="filters.user_id" :min="1" :controls="false" style="width:120px" /></el-form-item>
+        <el-form-item label="用户">
-        <el-form-item label="用户商品 ID"><el-input-number v-model="filters.user_goods_id" :min="1" :controls="false" style="width:130px" /></el-form-item>
+          <div class="selector-field"><el-input :model-value="filters.user_id ? `${filters._userName || '用户'} (#${filters.user_id})` : ''" readonly placeholder="请选择用户" /><el-button type="primary" @click="showUserSelector=true">选择</el-button><el-button v-if="filters.user_id" :icon="Close" circle title="清除用户" @click="clearUser" /></div>
+        </el-form-item>
+        <el-form-item label="用户商品">
+          <div class="selector-field"><el-input :model-value="filters.user_goods_id ? `${filters._userGoodsName || '用户商品'} (#${filters.user_goods_id})` : ''" readonly placeholder="请选择用户商品" /><el-button type="primary" @click="showUserGoodsSelector=true">选择</el-button><el-button v-if="filters.user_goods_id" :icon="Close" circle title="清除用户商品" @click="clearUserGoods" /></div>
+        </el-form-item>
         <el-form-item label="开始时间">
           <el-date-picker v-model="filters.started_range" type="datetimerange" start-placeholder="开始" end-placeholder="结束" value-format="YYYY-MM-DD HH:mm:ss" style="width:350px" />
         </el-form-item>
@@ -87,6 +96,8 @@
         </el-timeline><el-empty v-else description="暂无迁移链记录" />
       </div>
     </el-dialog>
+    <UserListSelector v-model="showUserSelector" :current-user-id="filters.user_id || 0" @confirm="handleUserSelected" />
+    <UserGoodsSelectorPopup v-model="showUserGoodsSelector" :user-id="filters.user_id || 0" :current-id="filters.user_goods_id || 0" @confirm="handleUserGoodsSelected" />
   </div>
 </template>
 
@@ -94,9 +105,11 @@
 import { computed, inject, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { Refresh, Search } from '@element-plus/icons-vue'
+import { Close, Refresh, Search } from '@element-plus/icons-vue'
 import { getVmMigrationRecordList, getVmMigrationRecordDetail, getVmMigrationRecordChain } from '@/api/admin/kvmService'
 import { extractApiError } from '@/utils/kvmErrorUtil'
+import UserListSelector from '@/components/admin/UserListSelector.vue'
+import UserGoodsSelectorPopup from '@/components/admin/UserGoodsSelectorPopup.vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -105,7 +118,12 @@ const injectedServiceId = inject('serviceId', null)
 const serviceId = computed(() => injectedServiceId?.value || Number(route.query.service_id) || 0)
 const serviceDirection = ref('source')
 const loading = ref(false), records = ref([]), total = ref(0), page = ref(1), count = ref(20)
-const filters = reactive({ migration_type: '', status: '', chain_id: '', task_id: '', user_id: null, user_goods_id: null, started_range: [] })
+const filters = reactive({ keyword: '', migration_type: '', status: '', chain_id: '', task_id: '', user_id: null, user_goods_id: null, _userName: '', _userGoodsName: '', started_range: [] })
+const showUserSelector = ref(false), showUserGoodsSelector = ref(false)
+const clearUserGoods = () => { filters.user_goods_id = null; filters._userGoodsName = '' }
+const clearUser = () => { filters.user_id = null; filters._userName = ''; clearUserGoods() }
+const handleUserSelected = user => { const id = user.user_id || user.id; if (Number(filters.user_id) !== Number(id)) clearUserGoods(); filters.user_id = id; filters._userName = user.user_name || user.name || '' }
+const handleUserGoodsSelected = goods => { filters.user_goods_id = goods.id; filters._userGoodsName = goods.good?.name || goods.good_name || goods.name || '' ; if (!filters.user_id && (goods.user_id || goods.userId)) filters.user_id = goods.user_id || goods.userId }
 const statusOptions = ['pending','exporting','importing','running','success','failed','aborted','warning'].map(value => ({ value, label: ({ pending:'等待中',exporting:'导出中',importing:'导入中',running:'执行中',success:'成功',failed:'失败',aborted:'已中断',warning:'警告' })[value] }))
 const statusLabel = s => statusOptions.find(x => x.value === s)?.label || s || '-'
 const statusType = s => ({ success:'success', failed:'danger', aborted:'info', warning:'warning', exporting:'warning', importing:'primary', running:'primary', pending:'info' })[s] || 'info'
@@ -113,10 +131,10 @@ const typeLabel = t => ({ host_migrate:'宿主机迁移', data_migrate:'跨服
 const formatTime = value => { if (!value) return '-'; const d = new Date(value); return Number.isNaN(d.getTime()) ? String(value) : d.toLocaleString('zh-CN', { hour12:false }) }
 const shortId = value => !value ? '-' : (value.length > 18 ? `${value.slice(0,8)}…${value.slice(-6)}` : value)
 const durationText = row => { if (!row.started_at) return '-'; const end = row.completed_at ? new Date(row.completed_at) : new Date(); const sec = Math.max(0, Math.floor((end-new Date(row.started_at))/1000)); return sec >= 3600 ? `${Math.floor(sec/3600)}时${Math.floor(sec%3600/60)}分` : sec >= 60 ? `${Math.floor(sec/60)}分${sec%60}秒` : `${sec}秒` }
-const buildParams = () => { const p = { page:page.value, count:count.value }; ['migration_type','status','chain_id','task_id','user_id','user_goods_id'].forEach(k => { if (filters[k] !== '' && filters[k] != null) p[k]=filters[k] }); if (embedded && serviceId.value) p[`${serviceDirection.value}_service_id`] = serviceId.value; if (filters.started_range?.length===2) [p.started_at_start,p.started_at_end]=filters.started_range; return p }
+const buildParams = () => { const p = { page:page.value, count:count.value }; ['keyword','migration_type','status','chain_id','task_id','user_id','user_goods_id'].forEach(k => { if (filters[k] !== '' && filters[k] != null) p[k]=filters[k] }); if (embedded && serviceId.value) p[`${serviceDirection.value}_service_id`] = serviceId.value; if (filters.started_range?.length===2) [p.started_at_start,p.started_at_end]=filters.started_range; return p }
 const loadList = async () => { loading.value=true; try { const res=await getVmMigrationRecordList(buildParams()); if(res?.data?.code!==200) throw new Error(extractApiError(res?.data,'加载迁移记录失败')); const d=res.data.data||{}; records.value=d.data||[]; total.value=d.all_count||0 } catch(e){ ElMessage.error(e.message||extractApiError(e?.response?.data,'加载迁移记录失败')) } finally { loading.value=false } }
 const search = () => { page.value=1; loadList() }, sizeChange = () => { page.value=1; loadList() }
-const resetFilters = () => { Object.assign(filters,{ migration_type:'',status:'',chain_id:'',task_id:'',user_id:null,user_goods_id:null,started_range:[] }); search() }
+const resetFilters = () => { Object.assign(filters,{ keyword:'',migration_type:'',status:'',chain_id:'',task_id:'',user_id:null,user_goods_id:null,_userName:'',_userGoodsName:'',started_range:[] }); search() }
 const detailVisible=ref(false), detailLoading=ref(false), currentRecord=ref(null)
 const snapshotFields=[{key:'request_snapshot',label:'请求参数'},{key:'before_snapshot',label:'迁移前快照'},{key:'after_snapshot',label:'迁移后快照'},{key:'manifest_snapshot',label:'迁移清单'},{key:'warning_snapshot',label:'警告'}]
 const prettySnapshot = value => { if(!value) return '暂无数据'; try { return JSON.stringify(typeof value==='string'?JSON.parse(value):value,null,2) } catch { return String(value) } }
@@ -136,5 +154,5 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.migration-record-page{padding:20px}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.page-header h2{font-size:20px;margin:0 0 6px}.page-header p{margin:0;color:#86909c;font-size:13px}.filter-card{margin-bottom:16px}.filter-card :deep(.el-form-item){margin-bottom:8px}.endpoint{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.mono{font-family:Consolas,monospace;font-size:12px}.muted{font-size:12px;color:#86909c;margin-top:3px}.pagination{display:flex;justify-content:flex-end;margin-top:16px}.snapshot-tabs{margin-top:18px}.json-view{margin:0;padding:14px;max-height:460px;overflow:auto;background:#f7f8fa;border:1px solid #ebeef5;border-radius:6px;white-space:pre-wrap;word-break:break-all;font:12px/1.6 Consolas,monospace}.error-text{color:#f56c6c}.chain-id{margin-bottom:20px;color:#606266}.chain-card-title{display:flex;justify-content:space-between;align-items:center;font-weight:600}.chain-route{margin:10px 0;color:#606266;font-size:13px}
+.migration-record-page{padding:20px}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.page-header h2{font-size:20px;margin:0 0 6px}.page-header p{margin:0;color:#86909c;font-size:13px}.filter-card{margin-bottom:16px}.filter-card :deep(.el-form-item){margin-bottom:8px}.selector-field{display:flex;gap:6px;width:300px}.selector-field .el-input{flex:1}.endpoint{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.mono{font-family:Consolas,monospace;font-size:12px}.muted{font-size:12px;color:#86909c;margin-top:3px}.pagination{display:flex;justify-content:flex-end;margin-top:16px}.snapshot-tabs{margin-top:18px}.json-view{margin:0;padding:14px;max-height:460px;overflow:auto;background:#f7f8fa;border:1px solid #ebeef5;border-radius:6px;white-space:pre-wrap;word-break:break-all;font:12px/1.6 Consolas,monospace}.error-text{color:#f56c6c}.chain-id{margin-bottom:20px;color:#606266}.chain-card-title{display:flex;justify-content:space-between;align-items:center;font-weight:600}.chain-route{margin:10px 0;color:#606266;font-size:13px}
 </style>