fix:修改用户选择展示的用户名称参数对接

src/components/UserSelector/index.vue

@@ -2,65 +2,94 @@
   <el-dialog
     :model-value="visible"
     title="选择用户"
-    width="800px"
+    width="700px"
     class="user-selector-dialog"
     append-to-body
     @update:model-value="handleVisibleChange"
   >
-    <!-- 搜索栏 -->
-    <div class="selector-search">
-      <el-input
-        v-model="searchParams.key"
-        placeholder="搜索用户名或ID"
-        clearable
-        @keyup.enter="handleSearch"
-        style="width: 300px; margin-right: 12px"
+    <div class="user-selector-content">
+      <!-- 搜索栏 -->
+      <div class="selector-search">
+        <el-input
+          v-model="searchParams.key"
+          placeholder="搜索用户名、邮箱或ID"
+          clearable
+          @keyup.enter="handleSearch"
+          class="search-input"
+        >
+          <template #prefix>
+            <el-icon><Search /></el-icon>
+          </template>
+          <template #append>
+            <el-button @click="handleSearch">
+              <el-icon><Search /></el-icon>
+            </el-button>
+          </template>
+        </el-input>
+        <el-button @click="handleReset" class="reset-btn">
+          <el-icon><Refresh /></el-icon>
+          重置
+        </el-button>
+      </div>
+
+      <!-- 用户表格 -->
+      <el-table
+        v-loading="loading"
+        :data="userList"
+        highlight-current-row
+        @current-change="handleCurrentChange"
+        style="width: 100%"
+        max-height="350"
+        :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
       >
-        <template #prefix>
-          <el-icon><Search /></el-icon>
-        </template>
-      </el-input>
-      <el-button type="primary" @click="handleSearch">
-        <el-icon><Search /></el-icon>
-        搜索
-      </el-button>
-      <el-button @click="handleReset">重置</el-button>
+        <el-table-column prop="user_id" label="用户ID" width="100" />
+        <el-table-column prop="user_name" label="用户名" min-width="130">
+          <template #default="{ row }">
+            <div class="user-name-cell">
+              <el-avatar v-if="row.avatar" :src="row.avatar" :size="28" />
+              <el-avatar v-else :size="28">
+                {{ row.user_name?.charAt(0)?.toUpperCase() || 'U' }}
+              </el-avatar>
+              <span class="user-name">{{ row.user_name || '-' }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="email" label="邮箱" min-width="180">
+          <template #default="{ row }">
+            <span class="text-ellipsis">{{ row.email || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag v-if="row.disable" type="danger" size="small">禁用</el-tag>
+            <el-tag v-else type="success" size="small">正常</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        v-model:current-page="searchParams.page"
+        v-model:page-size="searchParams.count"
+        :page-sizes="[10, 20, 50]"
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+        background
+        small
+        class="selector-pagination"
+      />
     </div>
 
-    <!-- 用户表格 -->
-    <el-table
-      v-loading="loading"
-      :data="userList"
-      highlight-current-row
-      @current-change="handleCurrentChange"
-      style="width: 100%; margin-top: 16px"
-      :height="400"
-    >
-      <el-table-column type="index" label="序号" width="60" />
-      <el-table-column prop="user_id" label="用户ID" width="100" />
-      <el-table-column prop="user_name" label="用户名" min-width="150" />
-      <el-table-column prop="email" label="邮箱" min-width="180" />
-
-    </el-table>
-
-    <!-- 分页 -->
-    <el-pagination
-      v-model:current-page="searchParams.page"
-      v-model:page-size="searchParams.count"
-      :page-sizes="[10, 20, 50, 100]"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="total"
-      @size-change="handleSizeChange"
-      @current-change="handlePageChange"
-      background
-      class="selector-pagination"
-    />
-
     <template #footer>
       <div class="dialog-footer">
+        <span v-if="selectedUser" class="selected-info">
+          已选择: <el-tag type="primary" size="small">{{ selectedUser.user_name }} (ID: {{ selectedUser.user_id }})</el-tag>
+        </span>
         <el-button @click="closeDialog">取消</el-button>
         <el-button type="primary" @click="confirmSelection" :disabled="!selectedUser">
-          确定选择
+          确定
         </el-button>
       </div>
     </template>
@@ -69,7 +98,7 @@
 
 <script setup>
 import { ref, reactive, watch } from 'vue'
-import { Search } from '@element-plus/icons-vue'
+import { Search, Refresh } from '@element-plus/icons-vue'
 import { getUserList } from '@/api/admin/user'
 import { ElMessage } from 'element-plus'
 
@@ -97,9 +126,7 @@ const searchParams = reactive({
 watch(() => props.visible, (newVal) => {
   if (newVal) {
     selectedUser.value = null
-    if (userList.value.length === 0) {
-      fetchUserList()
-    }
+    fetchUserList()
   }
 })
 
@@ -163,11 +190,44 @@ const confirmSelection = () => {
 </script>
 
 <style scoped>
+.user-selector-content {
+  max-height: 500px;
+  overflow: hidden;
+}
+
 .selector-search {
   display: flex;
   align-items: center;
-  padding: 12px 0;
+  gap: 12px;
+  padding-bottom: 16px;
   border-bottom: 1px solid #ebeef5;
+  margin-bottom: 16px;
+}
+
+.search-input {
+  flex: 1;
+  max-width: 350px;
+}
+
+.reset-btn {
+  flex-shrink: 0;
+}
+
+.user-name-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.user-name {
+  font-weight: 500;
+  color: #303133;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .selector-pagination {
@@ -175,6 +235,19 @@ const confirmSelection = () => {
   justify-content: flex-end;
 }
 
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.selected-info {
+  margin-right: auto;
+  color: #606266;
+  font-size: 13px;
+}
+
 :deep(.el-table__row) {
   cursor: pointer;
 }
@@ -184,8 +257,16 @@ const confirmSelection = () => {
 }
 
 :deep(.current-row) {
-  background-color: var(--el-color-primary-light-8) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+:deep(.current-row td) {
   color: var(--el-color-primary);
-  font-weight: bold;
+}
+
+:deep(.el-avatar) {
+  background-color: var(--el-color-primary-light-5);
+  color: #fff;
+  font-size: 12px;
 }
 </style>

src/views/marketing/UserVoucher.vue

@@ -177,30 +177,36 @@
           </el-radio-group>
         </el-form-item>
         
-        <el-form-item label="用户" prop="user_id">
+        <el-form-item label="用户" prop="user_id" v-if="addForm.target_type === 'user'">
           <div class="user-selector-wrapper">
-            <div class="selected-user-display" v-if="addForm.user_id">
-              <el-tag type="primary" closable @close="clearSelectedUser">
-                {{ getSelectedUserName() }}
-              </el-tag>
-            </div>
-            <el-button 
-              type="primary" 
-              plain 
+            <el-input 
+              :model-value="getSelectedUserName()" 
+              placeholder="请选择用户" 
+              readonly 
               @click="openUserSelector"
-              style="width: 100%"
             >
-              <el-icon><User /></el-icon>
-              {{ addForm.user_id ? '重新选择用户' : '选择用户' }}
+              <template #append>
+                <el-button @click="openUserSelector">
+                  <el-icon><Search /></el-icon>
+                </el-button>
+              </template>
+            </el-input>
+            <el-button 
+              v-if="addForm.user_id" 
+              type="danger" 
+              link 
+              @click="clearSelectedUser"
+              class="clear-btn"
+            >
+              清除
             </el-button>
           </div>
         </el-form-item>
         
-        <el-form-item label="用户组" prop="group_id">
+        <el-form-item label="用户组" prop="group_id" v-if="addForm.target_type === 'group'">
           <el-select 
             v-model="addForm.group_id" 
             placeholder="请选择用户组"
-            :disabled="addForm.target_type === 'user'"
             filterable
             clearable
             style="width: 100%"
@@ -653,9 +659,9 @@ const confirmUserSelection = (user) => {
     ElMessage.warning('请选择一个用户')
     return
   }
-  addForm.user_id = user.UserId
+  addForm.user_id = user.user_id
   // 将选中的用户添加到 userOptions 中（如果不存在）
-  if (!userOptions.value.find(u => u.UserId === user.UserId)) {
+  if (!userOptions.value.find(u => u.user_id === user.user_id)) {
     userOptions.value.push(user)
   }
   userSelectorVisible.value = false
@@ -668,8 +674,9 @@ const clearSelectedUser = () => {
 
 // 获取选中用户的显示名称
 const getSelectedUserName = () => {
-  const user = userOptions.value.find(u => u.UserId === addForm.user_id)
-  return user ? `${user.UserName} (ID: ${user.UserId})` : `用户ID: ${addForm.user_id}`
+  if (!addForm.user_id) return ''
+  const user = userOptions.value.find(u => u.user_id === addForm.user_id)
+  return user ? `${user.user_name} (ID: ${user.user_id})` : `用户ID: ${addForm.user_id}`
 }
 
 // 添加用户代金券
@@ -940,5 +947,21 @@ onMounted(() => {
   margin-top: 24px;
   justify-content: flex-end;
 }
+
+/* 用户选择器样式 */
+.user-selector-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.user-selector-wrapper .el-input {
+  flex: 1;
+}
+
+.user-selector-wrapper .clear-btn {
+  flex-shrink: 0;
+}
 </style>