fix:将填写弹窗修改为选择弹窗

src/views/order/OrderList.vue

@@ -186,10 +186,36 @@
           <el-input v-model="orderForm.table" placeholder="请输入所属表" />
         </el-form-item>
         <el-form-item label="用户ID" prop="user_id">
-          <el-input-number v-model="orderForm.user_id" :min="1" placeholder="请输入用户ID" style="width: 100%" />
+          <div class="selector-field">
+            <div class="selector-info" v-if="selectedUserInfo">
+              <el-tag type="primary" effect="plain">
+                ID: {{ orderForm.user_id }} - {{ selectedUserInfo.user_name }}
+              </el-tag>
+            </div>
+            <div class="selector-actions">
+              <el-button type="primary" @click="userSelectorVisible = true">
+                <el-icon><User /></el-icon>
+                {{ orderForm.user_id ? '更换用户' : '选择用户' }}
+              </el-button>
+              <el-button v-if="orderForm.user_id" @click="clearUser">清除</el-button>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item label="商品ID" prop="commodity_id">
-          <el-input-number v-model="orderForm.commodity_id" :min="0" placeholder="请输入商品ID" style="width: 100%" />
+          <div class="selector-field">
+            <div class="selector-info" v-if="selectedProductInfo">
+              <el-tag type="success" effect="plain">
+                ID: {{ orderForm.commodity_id }} - {{ selectedProductInfo.name }}
+              </el-tag>
+            </div>
+            <div class="selector-actions">
+              <el-button type="success" @click="productSelectorVisible = true">
+                <el-icon><ShoppingCart /></el-icon>
+                {{ orderForm.commodity_id ? '更换商品' : '选择商品' }}
+              </el-button>
+              <el-button v-if="orderForm.commodity_id" @click="clearProduct">清除</el-button>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item label="购买数量" prop="pay_num">
           <el-input-number v-model="orderForm.pay_num" :min="1" placeholder="请输入数量" style="width: 100%" />
@@ -204,10 +230,36 @@
           <el-input-number v-model="orderForm.expire_time" :min="0" placeholder="请输入过期时间(时间戳)" style="width: 100%" />
         </el-form-item>
         <el-form-item label="优惠码ID" prop="discount_code_id">
-          <el-input-number v-model="orderForm.discount_code_id" :min="0" placeholder="请输入优惠码ID" style="width: 100%" />
+          <div class="selector-field">
+            <div class="selector-info" v-if="selectedDiscountCodeInfo">
+              <el-tag type="warning" effect="plain">
+                ID: {{ orderForm.discount_code_id }} - {{ selectedDiscountCodeInfo.name || selectedDiscountCodeInfo.code }}
+              </el-tag>
+            </div>
+            <div class="selector-actions">
+              <el-button type="warning" @click="discountCodeSelectorVisible = true">
+                <el-icon><Ticket /></el-icon>
+                {{ orderForm.discount_code_id ? '更换优惠码' : '选择优惠码' }}
+              </el-button>
+              <el-button v-if="orderForm.discount_code_id" @click="clearDiscountCode">清除</el-button>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item label="代金券ID" prop="coupon_id">
-          <el-input-number v-model="orderForm.coupon_id" :min="0" placeholder="请输入代金券ID (必填)" style="width: 100%" />
+          <div class="selector-field">
+            <div class="selector-info" v-if="selectedVoucherInfo">
+              <el-tag type="danger" effect="plain">
+                ID: {{ orderForm.coupon_id }} - {{ selectedVoucherInfo.name || selectedVoucherInfo.code }}
+              </el-tag>
+            </div>
+            <div class="selector-actions">
+              <el-button type="danger" @click="voucherSelectorVisible = true">
+                <el-icon><Money /></el-icon>
+                {{ orderForm.coupon_id ? '更换代金券' : '选择代金券' }}
+              </el-button>
+              <el-button v-if="orderForm.coupon_id" @click="clearVoucher">清除</el-button>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item label="订单状态" prop="state">
           <el-radio-group v-model="orderForm.state">
@@ -233,14 +285,46 @@
         </div>
       </template>
     </el-dialog>
+
+    <!-- 用户选择器 -->
+    <UserListSelector
+      v-model="userSelectorVisible"
+      :current-user-id="orderForm.user_id"
+      @confirm="handleUserSelect"
+    />
+
+    <!-- 商品选择器 -->
+    <ProductSelector
+      v-model="productSelectorVisible"
+      :current-product-id="orderForm.commodity_id"
+      @confirm="handleProductSelect"
+    />
+
+    <!-- 优惠码选择器 -->
+    <DiscountCodeSelector
+      v-model="discountCodeSelectorVisible"
+      :current-code-id="orderForm.discount_code_id"
+      @confirm="handleDiscountCodeSelect"
+    />
+
+    <!-- 代金券选择器 -->
+    <VoucherSelector
+      v-model="voucherSelectorVisible"
+      :current-voucher-id="orderForm.coupon_id"
+      @confirm="handleVoucherSelect"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, Delete, Search, Download, Refresh } from '@element-plus/icons-vue'
+import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money } from '@element-plus/icons-vue'
 import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder } from '@/api/admin/order'
+import UserListSelector from '@/components/admin/UserListSelector.vue'
+import ProductSelector from '@/components/admin/ProductSelector.vue'
+import DiscountCodeSelector from '@/components/admin/DiscountCodeSelector.vue'
+import VoucherSelector from '@/components/admin/VoucherSelector.vue'
 
 // 查询参数
 const queryParams = reactive({
@@ -305,6 +389,18 @@ const detailDialogVisible = ref(false)
 const dialogType = ref('add')
 const orderFormRef = ref(null)
 
+// 选择器弹窗状态
+const userSelectorVisible = ref(false)
+const productSelectorVisible = ref(false)
+const discountCodeSelectorVisible = ref(false)
+const voucherSelectorVisible = ref(false)
+
+// 选择的显示信息
+const selectedUserInfo = ref(null)
+const selectedProductInfo = ref(null)
+const selectedDiscountCodeInfo = ref(null)
+const selectedVoucherInfo = ref(null)
+
 // 获取订单列表
 const fetchOrderList = async () => {
   loading.value = true
@@ -399,6 +495,7 @@ const handleCurrentChange = (page) => {
 const handleAdd = () => {
   dialogType.value = 'add'
   dialogVisible.value = true
+  clearAllSelections()
   Object.assign(orderForm, {
     order_id: undefined,
     name: '',
@@ -437,6 +534,8 @@ const handleView = async (row) => {
 const handleEdit = (row) => {
   dialogType.value = 'edit'
   dialogVisible.value = true
+  clearAllSelections()
+  
   Object.assign(orderForm, {
     order_id: row.id,
     name: row.name,
@@ -454,6 +553,14 @@ const handleEdit = (row) => {
     args: row.args || '',
     note: row.note || ''
   })
+  
+  // 设置显示信息（只显示ID，名称需要从选择器中获取）
+  if (row.userId) {
+    selectedUserInfo.value = { user_id: row.userId, user_name: `用户${row.userId}` }
+  }
+  if (row.commodityId) {
+    selectedProductInfo.value = { id: row.commodityId, name: `商品${row.commodityId}` }
+  }
 }
 
 // 删除订单
@@ -542,6 +649,62 @@ const submitForm = () => {
   })
 }
 
+// 用户选择处理
+const handleUserSelect = (user) => {
+  orderForm.user_id = user.user_id
+  selectedUserInfo.value = user
+}
+
+const clearUser = () => {
+  orderForm.user_id = undefined
+  selectedUserInfo.value = null
+}
+
+// 商品选择处理
+const handleProductSelect = (product) => {
+  orderForm.commodity_id = product.id
+  selectedProductInfo.value = product
+  // 自动填充表名
+  if (product.table) {
+    orderForm.table = product.table
+  }
+}
+
+const clearProduct = () => {
+  orderForm.commodity_id = 0
+  selectedProductInfo.value = null
+}
+
+// 优惠码选择处理
+const handleDiscountCodeSelect = (code) => {
+  orderForm.discount_code_id = code.id
+  selectedDiscountCodeInfo.value = code
+}
+
+const clearDiscountCode = () => {
+  orderForm.discount_code_id = 0
+  selectedDiscountCodeInfo.value = null
+}
+
+// 代金券选择处理
+const handleVoucherSelect = (voucher) => {
+  orderForm.coupon_id = voucher.id
+  selectedVoucherInfo.value = voucher
+}
+
+const clearVoucher = () => {
+  orderForm.coupon_id = 0
+  selectedVoucherInfo.value = null
+}
+
+// 清除所有选择信息
+const clearAllSelections = () => {
+  selectedUserInfo.value = null
+  selectedProductInfo.value = null
+  selectedDiscountCodeInfo.value = null
+  selectedVoucherInfo.value = null
+}
+
 // 初始化
 onMounted(() => {
   fetchOrderList()
@@ -701,4 +864,23 @@ onMounted(() => {
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
+
+/* 选择器字段样式 */
+.selector-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.selector-info {
+  display: flex;
+  align-items: center;
+}
+
+.selector-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
 </style>