shuhi-ui/src/views/recycleOrder/components/order-detail.vue

<!-- 编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="1560"
    v-model="visible"
    title="订单详情"
    @open="handleOpen"
    :body-style="{
      maxHeight: '84vh',
      position: 'relative',
      overflow: 'auto',
      background: '#f8f8f8',
      padding: '0'
    }"
    position="center"
    class="order-detail-modal"
  >
    <userDetail
      :detail="orderDetail"
      @refresh="getOrderDetail"
      ref="userDetailRef"
      @close="handleCancel"
    />

    <template #footer>
      <div style="display: flex; justify-content: space-between">
        <div style="margin-left: 10px"></div>
        <el-button @click="handleCancel" type="danger">关闭弹窗</el-button>
        <div style="display: flex">
          <el-button
            type="primary"
            @click="handleOtherAuditGood"
            v-if="orderDetail.status == 9 || orderDetail.status == 8"
            >其余审核良好</el-button
          >
          <el-button
            type="warning"
            @click="handleFirstCheck"
            v-if="orderDetail.status == 2"
            >初步审核</el-button
          >
          <el-button
            type="success"
            @click="handleConfirmReceipt"
            v-if="orderDetail.status == 6"
            >确认收货</el-button
          >
          <el-button
            color="#bd3124"
            @click="handleCompleteAudit"
            v-if="orderDetail.status == 9 || orderDetail.status == 8"
            >完成审核</el-button
          >
          <el-button
            color="#a16222"
            @click="handleBatchPayment"
            v-if="orderDetail.status == 10"
            >支付书款</el-button
          >
        </div>
      </div>
    </template>
  </ele-modal>

  <!-- 初审弹窗 -->
  <firstCheckModal ref="firstCheckRef" @success="handleSuccess" />
</template>

<script setup>
  import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
  import userDetail from '@/views/recycleOrder/detail/index.vue';
  import request from '@/utils/request';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';
  import firstCheckModal from '@/views/recycleOrder/components/first-check-modal.vue';

  const { proxy } = getCurrentInstance();
  const emit = defineEmits(['refresh']);

  /** 弹窗是否打开 */
  const visible = defineModel({ type: Boolean });

  /** 关闭弹窗 */
  const handleCancel = () => {
    visible.value = false;
  };

  /** 弹窗打开事件 */
  let orderId = ref('');
  const handleOpen = (data) => {
    visible.value = true;
    nextTick(() => {
      if (data && data.orderId) {
        orderId.value = data.orderId;
        console.log(data, orderId.value, 'xxxx');
        getOrderDetail();
      }

      resetScrollPosition();
    });
  };

  // 重置滚动条位置
  const resetScrollPosition = () => {
    nextTick(() => {
      setTimeout(() => {
        const modalBody = document.querySelectorAll('.order-detail-modal .ele-modal-body');
        if (modalBody) {
          modalBody[modalBody.length - 1].scrollTop = 0;
        }
      }, 100);
    });
  };

  //其余审核良好
  const userDetailRef = ref();
  function handleOtherAuditGood() {
    userDetailRef.value?.handleOtherAuditGood();
  }

  //获取订单详情
  const orderDetail = ref({});
  const getOrderDetail = () => {
    request.get(`/order/orderInfo/getInfo/${orderId.value}`).then((res) => {
      if (res.data.code === 200) {
        orderDetail.value = res.data.data;
      }
    });
  };

  //弹窗确认操作
  function messageBoxConfirm({ message, fetch }) {
    ElMessageBox.confirm(message, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '关闭',
      type: 'warning'
    }).then(() => {
      fetch().then((res) => {
        if (res.data.code === 200) {
          EleMessage.success('操作成功');
          handleCancel();
          emit('refresh');
        } else {
          EleMessage.error(res.data.msg);
        }
      });
    });
  }

  //初审
  const firstCheckRef = ref(null);
  function handleFirstCheck() {
    firstCheckRef.value?.handleOpen(orderDetail.value.orderId);
  }

  //确认收货
  function handleConfirmReceipt() {
    messageBoxConfirm({
      message: '确认收货？',
      fetch: () =>
        proxy.$http.post('/order/orderInfo/adminConfirm', {
          orderIds: [orderId.value]
        })
    });
  }

  //完成审核
  function handleCompleteAudit() {
    // /order/orderInfo/adminCheckFinish
    messageBoxConfirm({
      message: '确认完成审核？',
      fetch: () =>
        proxy.$http.post('/order/orderInfo/adminCheckFinish', {
          orderId: orderId.value
        })
    });
  }

  //支付书款
  function handleBatchPayment() {
    messageBoxConfirm({
      message: '确认支付书款？',
      fetch: () =>
        proxy.$http.post('/order/orderInfo/payout', {
          orderIds: [orderId.value]
        })
    });
  }

  //初审成功
  function handleSuccess() {
    handleCancel();
    emit('refresh');
  }

  defineExpose({
    handleOpen
  });
</script>