gypsy-crm-frontend-vu/pages/customer/components/OrderStatusMachineCell.vue

<template>
  <view class="order-status-cell">
    <!-- 状态标签 -->
    <view class="status-badge" :class="statusClass">
      {{ statusText }}
    </view>

    <!-- 取消按钮 -->
    <view v-if="showCancelBtn" class="cancel-btn">
      <span class="state btn crm-cursor" @click="handleCancel">
        {{ t('Btn.Cancel') }}
      </span>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { createOrderStatusMachine } from '../composables/statusMachine'
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const orderStatusMap = computed(() => ({
  1: t('State.ToBeProcessed'),
  2: t('State.Completed'),
  3: t('State.InTheProcessing'),
  4: t('State.Refused'),
  5: t('State.expireTime'),
  6: t('State.Cancelled')
}));
const props = defineProps({
  row: {
    type: Object,
    required: true
  },
  currentTime: {
    type: Number,
    default: () => Date.now()
  }
})

const emit = defineEmits(['cancel', 'cancelBackstage'])

// 创建状态机实例
const machine = computed(() => {
  return createOrderStatusMachine(props.row, props.currentTime)
})

// 状态信息
const statusInfo = computed(() => {
  return machine.value.getStatusInfo()
})

// 状态文本
const statusText = computed(() => {
  return orderStatusMap.value[statusInfo.value.value]
})

// 状态样式类
const statusClass = computed(() => {
  const value = statusInfo.value.value
  const classMap = {
    1: 'status-warning',      // 待处理 - 使用橙色/琥珀色
    2: 'status-success',      // 已完成 - 使用绿色
    3: 'status-processing',   // 进行中 - 使用蓝色/天蓝
    4: 'status-danger',       // 已拒绝 - 使用红色/玫瑰色
    5: 'status-expired',      // 已过期 - 使用石板灰
    6: 'status-cancelled'     // 已取消 - 使用石板灰
  }
  return classMap[value] || ''
})

// 是否显示取消按钮
const showCancelBtn = computed(() => {
  return machine.value.canCancel() || machine.value.canCancelBackstage()
})

// 处理取消
const handleCancel = () => {
  if (machine.value.canCancelBackstage()) {
    emit('cancelBackstage', props.row.id)
  } else {
    emit('cancel', props.row.id)
  }
}
</script>