瀏覽代碼

refactor(订单详情): 将子对话框事件提升到父组件

将订单详情组件中的子对话框操作改为通过事件向上传递,由父组件统一管理对话框的打开逻辑,简化组件间的依赖关系并提高可维护性。
ylong 1 月之前
父節點
當前提交
43b5b402f6
共有 2 個文件被更改,包括 5 次插入14 次删除
  1. 4 13
      src/views/mallOrder/all/components/order-detail.vue
  2. 1 1
      src/views/mallOrder/all/index.vue

+ 4 - 13
src/views/mallOrder/all/components/order-detail.vue

@@ -47,20 +47,12 @@
                 <el-button type="warning" @click="openRefund">缺货退款</el-button>
             </div>
         </template>
-
-        <!-- Sub Dialogs -->
-        <add-package-dialog ref="packageRef" />
-        <push-sms-dialog ref="smsRef" />
-        <refund-dialog ref="refundRef" />
     </ele-modal>
 </template>
 
 <script setup>
 import { ref, reactive, computed } from 'vue';
 import { EleMessage } from 'ele-admin-plus/es';
-import AddPackageDialog from './add-package-dialog.vue';
-import PushSmsDialog from './push-sms-dialog.vue';
-import RefundDialog from './refund-dialog.vue';
 import OrderBaseInfo from './order-base-info.vue';
 import OrderProductList from './order-product-list.vue';
 import request from '@/utils/request';
@@ -70,9 +62,8 @@ import { useDictData } from '@/utils/use-dict-data';
 const visible = defineModel({ type: Boolean });
 const detail = ref({});
 const loading = ref(false);
-const packageRef = ref(null);
-const smsRef = ref(null);
-const refundRef = ref(null);
+
+const emit = defineEmits(['push-sms', 'refund']);
 
 const [shop_order_status] = useDictData(['shop_order_status']);
 
@@ -120,11 +111,11 @@ const handleEditReceiver = () => {
 };
 
 const openPushSms = () => {
-    smsRef.value?.open(detail.value);
+    emit('push-sms', detail.value);
 };
 
 const openRefund = () => {
-    refundRef.value?.open(detail.value);
+    emit('refund', detail.value);
 };
 
 defineExpose({

+ 1 - 1
src/views/mallOrder/all/index.vue

@@ -28,7 +28,7 @@
         </ele-card>
 
         <!-- Dialogs -->
-        <order-detail ref="detailRef" />
+        <order-detail ref="detailRef" @push-sms="openSms" @refund="openRefund" />
         <push-sms-dialog ref="smsRef" />
         <refund-dialog ref="refundRef" @success="fetchData" />
         <add-package-dialog ref="packageRef" />