xx

src/views/marketing/UserVoucher.vue

@@ -2,8 +2,8 @@
   <div class="user-voucher-container">
     <!-- 搜索和操作栏 -->
     <el-card class="filter-container" shadow="never">
-      <el-form :inline="true" :model="queryParams" class="search-form">
-        <el-form-item label="代金券">
+      <el-form :inline="true" :model="queryParams" class="search-form" v-if="!codeId">
+        <el-form-item label="代金券" v-if="!codeId">
           <el-select 
             v-model="queryParams.code_id" 
             placeholder="请选择代金券"
@@ -54,37 +54,37 @@
             {{ row.Id || row.id }}
           </template>
         </el-table-column>
-        <el-table-column label="用户ID" width="100">
+        <el-table-column label="用户ID" min-width="120">
           <template #default="{ row }">
             {{ row.UserId || row.userId }}
           </template>
         </el-table-column>
-        <el-table-column label="代金券ID" width="100">
+        <el-table-column label="代金券ID" width="100" v-if="!codeId">
           <template #default="{ row }">
             {{ row.discountId }}
           </template>
         </el-table-column>
-        <el-table-column label="代金券名称" min-width="150">
+        <el-table-column label="代金券名称" min-width="150" v-if="!codeId">
           <template #default="{ row }">
             {{ row.discount?.name || '-' }}
           </template>
         </el-table-column>
-        <el-table-column label="面额" width="120">
+        <el-table-column label="面额" min-width="120">
           <template #default="{ row }">
             <span class="amount">¥{{ row.discount?.amount ? (row.discount.amount / 100).toFixed(2) : '0.00' }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="已使用/最大次数" width="150">
+        <el-table-column label="已使用/最大次数" min-width="150">
           <template #default="{ row }">
             <el-tag type="info">{{ row.useTimes || 0 }} / {{ row.maxUseTimes || row.discount?.maxTimes || 0 }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="过期时间" width="180">
+        <el-table-column label="过期时间" min-width="180">
           <template #default="{ row }">
             {{ formatDate(row.expireAt) }}
           </template>
         </el-table-column>
-        <el-table-column label="创建时间" width="180">
+        <el-table-column label="创建时间" min-width="180">
           <template #default="{ row }">
             {{ formatDate(row.CreatedAt) }}
           </template>
@@ -134,7 +134,7 @@
           <el-select 
             v-model="addForm.voucher_id" 
             placeholder="请选择代金券"
-            :disabled="addForm.discount_type === 'code'"
+            :disabled="addForm.discount_type === 'code' || !!codeId"
             filterable
             clearable
             style="width: 100%"
@@ -178,25 +178,22 @@
         </el-form-item>
         
         <el-form-item label="用户" prop="user_id">
-          <el-select 
-            v-model="addForm.user_id" 
-            placeholder="请选择用户"
-            :disabled="addForm.target_type === 'group'"
-            filterable
-            clearable
-            remote
-            :remote-method="searchUsers"
-            :loading="userSearchLoading"
-            style="width: 100%"
-            @change="handleUserChange"
-          >
-            <el-option
-              v-for="item in userOptions"
-              :key="item.UserId"
-              :label="`${item.UserName} (ID: ${item.UserId})`"
-              :value="item.UserId"
-            />
-          </el-select>
+          <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 
+              @click="openUserSelector"
+              style="width: 100%"
+            >
+              <el-icon><User /></el-icon>
+              {{ addForm.user_id ? '重新选择用户' : '选择用户' }}
+            </el-button>
+          </div>
         </el-form-item>
         
         <el-form-item label="用户组" prop="group_id">
@@ -268,13 +265,19 @@
         <el-button type="primary" @click="submitEdit">确定</el-button>
       </template>
     </el-dialog>
+    <!-- 用户选择弹窗 -->
+    <UserSelector
+      v-model:visible="userSelectorVisible"
+      @select="confirmUserSelection"
+    />
   </div>
+
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, watch } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Delete, Search, Plus, Refresh } from '@element-plus/icons-vue'
+import { Delete, Search, Plus, Refresh, User } from '@element-plus/icons-vue'
 import { 
   getUserVoucherList, 
   addUserVoucher,
@@ -285,14 +288,29 @@ import {
   allocateVoucher
 } from '@/api/admin/discount'
 import { getUserList, getUserGroupList } from '@/api/admin/user'
+import UserSelector from '@/components/UserSelector/index.vue'
+
+const props = defineProps({
+  codeId: {
+    type: [String, Number],
+    default: ''
+  }
+})
 
 // 查询参数
 const queryParams = reactive({
-  code_id: undefined,
+  code_id: props.codeId || undefined,
   page: 1,
   count: 10
 })
 
+watch(() => props.codeId, (newVal) => {
+  if (newVal) {
+    queryParams.code_id = newVal
+    fetchUserVoucherList()
+  }
+})
+
 // 添加表单
 const addForm = reactive({
   discount_type: 'coupon',  // 优惠类型：coupon-代金券, code-优惠码
@@ -321,6 +339,7 @@ const groupOptions = ref([])     // 用户组选项
 const userSearchLoading = ref(false)  // 用户搜索加载状态
 const submitLoading = ref(false)      // 提交加载状态
 const dataList = ref([])          // 优惠列表
+const userSelectorVisible = ref(false)
 
 // 编辑表单
 const editForm = reactive({
@@ -623,6 +642,36 @@ const handleGroupChange = (val) => {
   }
 }
 
+// 打开用户选择器
+const openUserSelector = () => {
+  userSelectorVisible.value = true
+}
+
+// 确认用户选择
+const confirmUserSelection = (user) => {
+  if (!user) {
+    ElMessage.warning('请选择一个用户')
+    return
+  }
+  addForm.user_id = user.UserId
+  // 将选中的用户添加到 userOptions 中（如果不存在）
+  if (!userOptions.value.find(u => u.UserId === user.UserId)) {
+    userOptions.value.push(user)
+  }
+  userSelectorVisible.value = false
+}
+
+// 清除选中的用户
+const clearSelectedUser = () => {
+  addForm.user_id = undefined
+}
+
+// 获取选中用户的显示名称
+const getSelectedUserName = () => {
+  const user = userOptions.value.find(u => u.UserId === addForm.user_id)
+  return user ? `${user.UserName} (ID: ${user.UserId})` : `用户ID: ${addForm.user_id}`
+}
+
 // 添加用户代金券
 const handleAdd = async () => {
   addDialogVisible.value = true
@@ -630,7 +679,7 @@ const handleAdd = async () => {
   // 重置表单
   Object.assign(addForm, {
     discount_type: 'coupon',
-    voucher_id: undefined,
+    voucher_id: props.codeId || undefined,
     code_id: undefined,
     target_type: 'user',
     user_id: undefined,
@@ -837,6 +886,9 @@ onMounted(() => {
   // 加载代金券列表供选择
   fetchVoucherListOptions()
   fetchDiscountList()
+  if (queryParams.code_id) {
+    fetchUserVoucherList()
+  }
 })
 </script>