修改订单分配抽屉样式

src/views/order/orderAssignment/index.vue

@@ -122,8 +122,6 @@ import { listOrderAssignment, getOrderMain, delOrderMain } from '@/api/order/ord
 import { OrderMainVO, OrderMainQuery, OrderMainForm } from '@/api/order/orderMain/types';
 import AssignmentDialog from './assignmentDialog.vue';
 import SplitAssignDialog from './splitAssignDialog.vue';
-import { ElMessageBox } from 'element-plus';
-import { h } from 'vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { order_assignment_status, order_check_status, pay_method, order_source, sys_platform_code } = toRefs<any>(
@@ -143,7 +141,6 @@ const queryFormRef = ref<ElFormInstance>();
 const orderMainFormRef = ref<ElFormInstance>();
 const assignmentDialogRef = ref<InstanceType<typeof AssignmentDialog>>();
 const splitAssignDialogRef = ref<InstanceType<typeof SplitAssignDialog>>();
-const assignTypeValue = ref('1'); // 分配类型选择值
 
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
 const dialog = reactive<DialogOption>({
@@ -199,6 +196,7 @@ const initFormData: OrderMainForm = {
   userNo: undefined,
   status: undefined,
   remark: undefined,
+  isSplitChild: undefined,
   orderProductBos: [],
   customerSalesInfoVo: {}
 };
@@ -294,89 +292,10 @@ const handleReview = (row?: OrderMainVO) => {
 /** 订单分配按钮操作 */
 const handleAssignment = async (row?: OrderMainVO | null) => {
   let orderIds: Array<string | number>;
-  let orderNo: string | undefined;
-  let platformCode: string | undefined;
 
   if (row) {
-    // 单个订单分配 - 弹出选择框
-    orderIds = [row.id];
-    orderNo = row.orderNo;
-    platformCode = row.platformCode;
-
-    // 弹出选择整单/拆单分配的对话框
-    try {
-      assignTypeValue.value = '1'; // 重置为整单分配
-      await ElMessageBox({
-        title: '选择分配方式',
-        message: h('div', { style: 'padding: 10px 0' }, [
-          h('p', { style: 'margin-bottom: 15px; font-size: 14px' }, '请选择分配方式：'),
-          h('div', { style: 'display: flex; flex-direction: column; gap: 12px' }, [
-            h(
-              'label',
-              {
-                style: 'display: flex; align-items: center; cursor: pointer; font-size: 14px',
-                onClick: () => {
-                  assignTypeValue.value = '1';
-                  const radio = document.querySelector('input[name="assignType"][value="1"]') as HTMLInputElement;
-                  if (radio) radio.checked = true;
-                }
-              },
-              [
-                h('input', {
-                  type: 'radio',
-                  name: 'assignType',
-                  value: '1',
-                  checked: true,
-                  style: 'margin-right: 8px; cursor: pointer',
-                  onChange: () => {
-                    assignTypeValue.value = '1';
-                  }
-                }),
-                h('span', null, '整单分配')
-              ]
-            ),
-            h(
-              'label',
-              {
-                style: 'display: flex; align-items: center; cursor: pointer; font-size: 14px',
-                onClick: () => {
-                  assignTypeValue.value = '2';
-                  const radio = document.querySelector('input[name="assignType"][value="2"]') as HTMLInputElement;
-                  if (radio) radio.checked = true;
-                }
-              },
-              [
-                h('input', {
-                  type: 'radio',
-                  name: 'assignType',
-                  value: '2',
-                  style: 'margin-right: 8px; cursor: pointer',
-                  onChange: () => {
-                    assignTypeValue.value = '2';
-                  }
-                }),
-                h('span', null, '拆单分配')
-              ]
-            )
-          ])
-        ]),
-        showCancelButton: true,
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      });
-
-      // 根据选择打开对应的对话框
-      if (assignTypeValue.value === '1') {
-        // 整单分配
-        assignmentDialogRef.value?.open(orderIds, orderNo, platformCode);
-      } else {
-        // 拆单分配
-        splitAssignDialogRef.value?.open(orderIds[0]);
-      }
-    } catch (error) {
-      // 用户取消
-      return;
-    }
+    // 单个订单分配 - 直接打开统一的分配抽屉
+    splitAssignDialogRef.value?.open(row.id);
   } else {
     // 批量分配 - 只支持整单分配
     if (!ids.value || ids.value.length === 0) {
@@ -384,7 +303,7 @@ const handleAssignment = async (row?: OrderMainVO | null) => {
       return;
     }
     orderIds = ids.value;
-    assignmentDialogRef.value?.open(orderIds, undefined, platformCode);
+    assignmentDialogRef.value?.open(orderIds, undefined, undefined);
   }
 };
 

src/views/order/orderAssignment/splitAssignDialog.vue

@@ -1,72 +1,111 @@
 <template>
   <el-drawer v-model="drawer.visible" :title="drawer.title" size="70%" direction="rtl" :before-close="handleClose">
     <div class="drawer-content">
-      <el-form ref="splitAssignFormRef" :model="form" label-width="100px">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="订单编号">
-              <span class="form-value">{{ orderInfo.orderNo }}</span>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="当前平台">
-              <dict-tag :options="sys_platform_code" :value="orderInfo.platformCode" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-divider content-position="left">商品列表</el-divider>
-
-        <el-form-item label-width="0">
-          <el-table :data="form.productList" border style="width: 100%" max-height="500">
-            <el-table-column type="index" label="序号" width="60" align="center" />
-            <el-table-column label="商品图片" width="100" align="center">
-              <template #default="scope">
-                <el-image
-                  v-if="scope.row.productImage"
-                  :src="scope.row.productImage"
-                  style="width: 60px; height: 60px"
-                  fit="cover"
-                  :preview-src-list="[scope.row.productImage]"
-                />
-                <span v-else style="color: #999">暂无图片</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="商品编号" prop="productNo" width="140" align="center" />
-            <el-table-column label="商品名称" prop="productName" show-overflow-tooltip />
-            <el-table-column label="数量" prop="orderQuantity" width="100" align="center" />
-            <el-table-column label="单价" prop="orderPrice" width="120" align="center">
-              <template #default="scope">
-                <span>¥{{ scope.row.orderPrice }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="小计" width="120" align="center">
-              <template #default="scope">
-                <span style="color: #f56c6c; font-weight: bold">¥{{ (scope.row.orderPrice * scope.row.orderQuantity).toFixed(2) }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column label="分配平台" align="center" fixed="right">
-              <template #default="scope">
-                <el-select v-model="scope.row.targetPlatform" placeholder="请选择平台" style="width: 100%">
-                  <el-option v-for="dict in sys_platform_code" :key="dict.value" :label="dict.label" :value="dict.value" />
-                </el-select>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-form-item>
-
-        <el-divider content-position="left">分配原因</el-divider>
-
-        <el-form-item label-width="0" prop="remark">
-          <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入分配原因（选填）" maxlength="500" show-word-limit />
-        </el-form-item>
-      </el-form>
+      <!-- 分配方式选择 -->
+      <div class="assign-type-selector">
+        <el-radio-group v-model="assignType" @change="handleAssignTypeChange">
+          <el-radio-button value="whole">整单分配</el-radio-button>
+          <el-radio-button value="split">拆单分配</el-radio-button>
+        </el-radio-group>
+      </div>
+
+      <el-divider />
+
+      <!-- 整单分配表单 -->
+      <div v-show="assignType === 'whole'" class="whole-assign-form">
+        <el-form ref="wholeAssignFormRef" :model="wholeForm" :rules="wholeRules" label-width="120px">
+          <el-form-item label="订单编号" v-if="orderInfo.orderNo">
+            <span class="form-value">{{ orderInfo.orderNo }}</span>
+          </el-form-item>
+
+          <el-form-item label="当前平台" v-if="orderInfo.platformCode">
+            <dict-tag :options="sys_platform_code" :value="orderInfo.platformCode" />
+          </el-form-item>
+
+          <el-form-item label="分配后平台" prop="platformAfter">
+            <el-select v-model="wholeForm.platformAfter" placeholder="请选择平台" style="width: 100%" filterable clearable>
+              <el-option v-for="dict in sys_platform_code" :key="dict.value" :label="dict.label" :value="dict.value" />
+            </el-select>
+          </el-form-item>
+
+          <el-divider content-position="left">分配原因</el-divider>
+
+          <el-form-item label-width="0" prop="remark">
+            <el-input v-model="wholeForm.remark" type="textarea" :rows="6" placeholder="请输入分配原因（选填）" maxlength="500" show-word-limit />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <!-- 拆单分配表单 -->
+      <div v-show="assignType === 'split'" class="split-assign-form">
+        <el-form ref="splitAssignFormRef" :model="form" label-width="100px">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="订单编号">
+                <span class="form-value">{{ orderInfo.orderNo }}</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="当前平台">
+                <dict-tag :options="sys_platform_code" :value="orderInfo.platformCode" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-divider content-position="left">商品列表</el-divider>
+
+          <el-form-item label-width="0">
+            <el-table :data="form.productList" border style="width: 100%" max-height="500">
+              <el-table-column type="index" label="序号" width="60" align="center" />
+              <el-table-column label="商品图片" width="100" align="center">
+                <template #default="scope">
+                  <el-image
+                    v-if="scope.row.productImage"
+                    :src="scope.row.productImage"
+                    style="width: 60px; height: 60px"
+                    fit="cover"
+                    :preview-src-list="[scope.row.productImage]"
+                  />
+                  <span v-else style="color: #999">暂无图片</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="商品编号" prop="productNo" width="140" align="center" />
+              <el-table-column label="商品名称" prop="productName" show-overflow-tooltip />
+              <el-table-column label="数量" prop="orderQuantity" width="100" align="center" />
+              <el-table-column label="单价" prop="orderPrice" width="120" align="center">
+                <template #default="scope">
+                  <span>¥{{ scope.row.orderPrice }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="小计" width="120" align="center">
+                <template #default="scope">
+                  <span>¥{{ (scope.row.orderPrice * scope.row.orderQuantity).toFixed(2) }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="分配平台" align="center" fixed="right">
+                <template #default="scope">
+                  <el-select v-model="scope.row.targetPlatform" placeholder="请选择平台" style="width: 100%">
+                    <el-option v-for="dict in sys_platform_code" :key="dict.value" :label="dict.label" :value="dict.value" />
+                  </el-select>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+
+          <el-divider content-position="left">分配原因</el-divider>
+
+          <el-form-item label-width="0" prop="remark">
+            <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入分配原因（选填）" maxlength="500" show-word-limit />
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
 
     <template #footer>
       <div class="drawer-footer">
         <el-button @click="cancel">取 消</el-button>
-        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button v-if="assignType === 'whole'" :loading="buttonLoading" type="primary" @click="submitWholeForm">确 定</el-button>
+        <el-button v-else :loading="buttonLoading" type="primary" @click="submitSplitForm">确 定</el-button>
       </div>
     </template>
   </el-drawer>
@@ -79,6 +118,17 @@
   overflow-y: auto;
 }
 
+.assign-type-selector {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0;
+
+  :deep(.el-radio-button__inner) {
+    padding: 12px 30px;
+    font-size: 14px;
+  }
+}
+
 .drawer-footer {
   display: flex;
   justify-content: flex-end;
@@ -100,8 +150,8 @@
 
 <script setup name="SplitAssignDialog" lang="ts">
 import { getOrderMain } from '@/api/order/orderMain';
-import { addOrderSplitAssign } from '@/api/order/orderAssignmentLog';
-import { OrderSplitAssignForm, OrderProductAssignRule } from '@/api/order/orderAssignmentLog/types';
+import { addOrderSplitAssign, addOrderAssignment } from '@/api/order/orderAssignmentLog';
+import { OrderSplitAssignForm, OrderProductAssignRule, OrderAssignmentForm } from '@/api/order/orderAssignmentLog/types';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_platform_code } = toRefs<any>(proxy?.useDict('sys_platform_code'));
@@ -110,10 +160,14 @@ const emit = defineEmits(['success']);
 
 const buttonLoading = ref(false);
 const splitAssignFormRef = ref<ElFormInstance>();
+const wholeAssignFormRef = ref<ElFormInstance>();
+
+// 分配类型：whole-整单分配，split-拆单分配
+const assignType = ref<'whole' | 'split'>('whole');
 
 const drawer = reactive<DialogOption>({
   visible: false,
-  title: '拆单分配'
+  title: '订单分配'
 });
 
 const orderInfo = ref<any>({
@@ -122,15 +176,27 @@ const orderInfo = ref<any>({
   platformCode: ''
 });
 
+// 拆单分配表单
 const form = reactive({
   productList: [] as any[],
   remark: ''
 });
 
+// 整单分配表单
+const wholeForm = reactive({
+  platformAfter: '',
+  remark: ''
+});
+
+const wholeRules = {
+  platformAfter: [{ required: true, message: '分配后平台不能为空', trigger: 'blur' }]
+};
+
 /** 打开对话框 */
 const open = async (orderId: string | number) => {
   reset();
   drawer.visible = true;
+  assignType.value = 'whole'; // 默认显示整单分配
 
   try {
     // 获取订单详情
@@ -140,18 +206,14 @@ const open = async (orderId: string | number) => {
       id: res.data.id,
       platformCode: res.data.platformCode
     };
-    console.log(res);
 
-    // 加载订单商品列表
+    // 加载订单商品列表（用于拆单分配）
     if (res.data.orderProductList && res.data.orderProductList.length > 0) {
       form.productList = res.data.orderProductList.map((item: any) => ({
         ...item,
         itemId: item.id, // 商品行ID
         targetPlatform: '' // 初始化分配平台为空
       }));
-    } else {
-      proxy?.$modal.msgWarning('该订单没有商品信息');
-      drawer.visible = false;
     }
   } catch (error) {
     proxy?.$modal.msgError('获取订单信息失败');
@@ -159,15 +221,29 @@ const open = async (orderId: string | number) => {
   }
 };
 
+/** 分配类型切换 */
+const handleAssignTypeChange = (value: 'whole' | 'split') => {
+  // 切换时可以做一些清理工作
+  if (value === 'split' && form.productList.length === 0) {
+    proxy?.$modal.msgWarning('该订单没有商品信息，无法进行拆单分配');
+    assignType.value = 'whole';
+  }
+};
+
 /** 表单重置 */
 const reset = () => {
   form.productList = [];
   form.remark = '';
+  wholeForm.platformAfter = '';
+  wholeForm.remark = '';
+  assignType.value = 'whole';
   orderInfo.value = {
     orderNo: '',
     id: undefined,
     platformCode: ''
   };
+  splitAssignFormRef.value?.resetFields();
+  wholeAssignFormRef.value?.resetFields();
 };
 
 /** 取消按钮 */
@@ -185,8 +261,34 @@ const handleClose = (done: () => void) => {
   reset();
 };
 
-/** 提交按钮 */
-const submitForm = async () => {
+/** 提交整单分配 */
+const submitWholeForm = async () => {
+  wholeAssignFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      try {
+        const submitData: OrderAssignmentForm = {
+          orderIds: orderInfo.value.id,
+          platformAfter: wholeForm.platformAfter,
+          assignType: '0', // 整单分配
+          remark: wholeForm.remark
+        };
+
+        await addOrderAssignment(submitData);
+        proxy?.$modal.msgSuccess('整单分配成功');
+        drawer.visible = false;
+        emit('success');
+      } catch (error) {
+        proxy?.$modal.msgError('整单分配失败');
+      } finally {
+        buttonLoading.value = false;
+      }
+    }
+  });
+};
+
+/** 提交拆单分配 */
+const submitSplitForm = async () => {
   // 验证每个商品都选择了平台
   const unassignedProducts = form.productList.filter((item) => !item.targetPlatform);
   if (unassignedProducts.length > 0) {