OrderDetail.vue

<template>
  <div class="space-y-6">
    <!-- 操作按钮区 -->
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4">
        <el-button 
          @click="$emit('back')"
          class="border-neutral-300 bg-white"
        >
          <ArrowLeft class="w-4 h-4 mr-2" />
          返回
        </el-button>
        <h1 class="text-2xl font-bold text-neutral-900 m-0" style="margin-left: 8px;">订单详情</h1>
      </div>
      
      <div class="flex items-center gap-2" v-if="order.status !== '0'">
        <el-button 
          @click="isCloseDialogOpen = true"
          v-if="order.auditStatus !== '1'"
          class="border-neutral-500 text-neutral-700"
        >
          关闭订单
        </el-button>

        <!-- 待审核：关闭订单 + 驳回 + 通过 -->
        <template v-if="order.auditStatus==='0' && permissionJson.audit">
          <el-dropdown @command="handleAuditCommand">
            <el-button type="primary" class="bg-brand-primary">
              审核订单
              <el-icon class="ml-1">
                <ArrowDown />
              </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="approve" class="flex items-center gap-2" style="color: #3b82f6;">
                  <Check class="w-4 h-4" /> 审核通过
                </el-dropdown-item>
                <el-dropdown-item command="reject" class="flex items-center gap-2" style="color: #d4183d;">
                  <X class="w-4 h-4" /> 审核驳回
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>

      </div>
    </div>

    <!-- 主内容区 - 左右两列布局 -->
    <div class="grid grid-cols-3 gap-6">
      <!-- 左侧列 - 占2/3 -->
      <div class="col-span-2 space-y-6">
        <!-- 订单基础信息和状态信息 -->
        <el-card class="p-6">
          <h3 class="text-neutral-900 font-bold mb-4">订单基础信息</h3>
          <div class="grid grid-cols-2 gap-x-6 gap-y-5">
            <div>
              <label class="text-neutral-500 text-sm">订单ID</label>
              <p class="mt-2 font-mono text-neutral-900">{{ order.id }}</p>
            </div>
            <div>
              <label class="text-neutral-500 text-sm">能人</label>
              <p class="mt-2 text-neutral-900">{{ order.chinaPersonName }}</p>
            </div>
            <div>
              <label class="text-neutral-500 text-sm">能人手机号</label>
              <p class="mt-2 text-neutral-900">{{ order.chinaPersonPhone }}</p>
            </div>
            <div>
              <label class="text-neutral-500 text-sm">登记时间</label>
              <p class="mt-2 text-neutral-700">{{ $utils.detailTime(order.createTime) }}</p>
            </div>
            <div>
              <label class="text-neutral-500 text-sm">客户号码</label>
              <p class="mt-2 text-neutral-900">{{ order.customerPhone }}</p>
            </div>
            <div>
              <label class="text-neutral-500 text-sm">业务名称</label>
              <p class="mt-2 text-neutral-900">{{ order.jobName }}</p>
            </div>
            <div>
              <label class="text-neutral-500 text-sm">业务状态</label>
              <div class="mt-2">
                <span 
                  :class="getstatusClass(order.status)"
                  class="px-2 py-1 rounded text-xs font-medium"
                >
                  {{ getstatusName(order.status) }}
                </span>
              </div>
            </div>
            <div v-if="order.auditStatus">
              <label class="text-neutral-500 text-sm">审核状态</label>
              <div class="mt-2">
                <span 
                  :class="getauditStatusClass(order.auditStatus)"
                  class="px-2 py-1 rounded text-xs font-medium"
                >
                  {{ getauditStatusName(order.auditStatus) }}
                </span>
              </div>
            </div>
            <div v-if="orderMemo" class="col-span-2">
              <label class="text-neutral-500 text-sm">备注信息</label>
              <p class="mt-2 text-neutral-700">{{ orderMemo || '--' }}</p>
            </div>
          </div>
        </el-card>

        <!-- 操作日志 -->
        <el-card v-if="logData.length > 0" class="p-6">
          <h3 class="text-neutral-900 font-bold mb-4">操作日志</h3>
          <div class="space-y-5">
            <div 
              v-for="(log, index) in logData" 
              :key="log.id" 
              class="flex gap-4"
            >
              <div class="flex flex-col items-center">
                <div class="w-3 h-3 rounded-full bg-brand-primary"></div>
                <div 
                  v-if="index < logData!.length - 1"
                  class="w-0.5 flex-1 bg-neutral-300 my-1"
                ></div>
              </div>
              <div class="flex-1 pb-2">
                <div class="flex items-center gap-2 mb-1.5">
                  <span class="text-neutral-900">{{ log.functionName }}</span>
                  <el-tag size="small" type="info">{{ log.operatorName }}</el-tag>
                </div>
                <p class="text-sm text-neutral-600 mb-1">{{ log.detail.memo || log.detail.auditMemo}}</p>
                <p class="text-xs text-neutral-500">{{ $utils.detailTime(log.createTime) }}</p>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 订单关闭信息 -->
        <el-card v-if="order.status === '0' && order.closeReason" class="p-6 bg-neutral-50">
          <h3 class="text-neutral-900 font-bold mb-4">订单关闭信息</h3>
          <div>
            <label class="text-neutral-700 text-sm">订单关闭原因</label>
            <div class="mt-3 p-3 bg-neutral-100 border border-neutral-300 rounded">
              <p class="text-sm text-neutral-700">{{ order.closeReason }}</p>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 右侧列 - 占1/3 -->
      <div class="col-span-1 space-y-6">
        <!-- 办结信息录入区 -->
        <el-card class="p-6">
          <h3 class="text-neutral-900 font-bold mb-4">办结信息录入区</h3>
          <div class="space-y-5">
            <div>
              <label class="text-neutral-900 text-sm">
                CRM订单编号 <span class="text-error">*</span>
              </label>
              <el-input
                v-if="canEditCompleteInfo"
                v-model="crmOrderId"
                placeholder="请输入CRM订单编号"
                class="mt-2"
              />
              <p v-else class="mt-2 text-neutral-700">{{ order.crmOrderId || '--' }}</p>
            </div>
            
            <div>
              <label class="text-neutral-900 text-sm">办理订单备注（选填）</label>
              <el-input
                v-if="canEditCompleteInfo"
                v-model="processRemark"
                type="textarea"
                :rows="3"
                placeholder="请输入办理订单备注"
                class="mt-2"
              />
              <p v-else class="mt-2 text-neutral-700">{{ order.crmOrderMemo || '--' }}</p>
            </div>

            <el-button
              type="primary"
              @click="handleSaveCrm"
              v-if="canEditCompleteInfo"
              class="bg-brand-primary"
              style="float: right;"
            >
              保存
            </el-button>
          </div>
        </el-card>

        <!-- 酬金信息区 -->
        <el-card class="p-6" v-if="permissionJson.updateOrder">
          <h3 class="text-neutral-900 font-bold mb-4">酬金信息</h3>
          <div class="space-y-5">
            <!-- 预计酬金金额 -->
            <div>
              <label class="text-neutral-500 text-sm">预计酬金金额</label>
              <p class="mt-2 text-2xl text-neutral-900">
                ¥{{ order.preMoney?.toFixed(2) || '0.00' }}
              </p>
            </div>

            <!-- 实际结酬金额 -->
            <div>
              <label class="text-neutral-900 text-sm">
                实际结酬金额{{ canEditReward && order.auditStatus !== '0' ? '（选填）' : '' }}
              </label>
              <el-input
                v-if="canEditReward && order.auditStatus !== '0'"
                v-model="realMoney"
                type="Number"
                placeholder="请输入实际结酬金额"
                class="mt-2"
              >
                <template #prepend>¥</template>
              </el-input>
              <p v-else class="mt-2 text-2xl text-success">
                ¥{{ order.realMoney?.toFixed(2) || '0.00' }}
              </p>
            </div>

            <el-button 
              type="primary"
              @click="handleSaveReward"
              v-if="canEditReward"
              class="bg-brand-primary"
              style="float: right;"
            >
              提交审核
            </el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 审核驳回对话框 -->
    <el-dialog 
      v-model="isRejectDialogOpen" 
      title="审核驳回" 
      width="500px"
      class="reject-dialog"
    >
      <div>
        <el-form>
          <el-form-item label="驳回原因" required>
            <el-input
              v-model="rejectReason"
              type="textarea"
              :rows="4"
              placeholder="请输入驳回原因"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="flex justify-end gap-2">
          <el-button 
            @click="isRejectDialogOpen = false"
            class="border-neutral-300"
          >
            取消
          </el-button>
          <el-button 
            type="primary"
            @click="handleReject"
            class="bg-brand-primary"
          >
            确认驳回
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 关闭订单对话框 -->
    <el-dialog 
      v-model="isCloseDialogOpen" 
      title="关闭订单" 
      width="500px"
      class="close-order-dialog"
    >
      <div>
        <el-form>
          <el-form-item label="关闭原因" required>
            <el-input
              v-model="closeReason"
              type="textarea"
              :rows="4"
              placeholder="请输入关闭原因"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="flex justify-end gap-2">
          <el-button 
            @click="isCloseDialogOpen = false"
            class="border-neutral-300"
          >
            取消
          </el-button>
          <el-button 
            type="primary"
            @click="handleClose"
            class="bg-brand-primary"
          >
            确认关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed ,getCurrentInstance,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import { ArrowLeft, Check, X } from 'lucide-vue-next'
import { ArrowDown } from '@element-plus/icons-vue'

const { $api,$utils } = getCurrentInstance()!.appContext.config.globalProperties

// 类型定义
type status = '-1' | '1' | '0'
type auditStatus = '0' | '1' | '2'

interface OperationLog {
  id: string
  time: string
  operator: string
  action: string
  details: string
}

interface Order {
  id: string
  chinaPersonPhone: string
  chinaPersonName: string
  customerPhone: string
  job: string
  jobName?: string
  memo?: string
  createTime: string
  status: status
  auditStatus?: auditStatus
  preMoney?: number
  realMoney?: number
  crmOrderId?: string
  completeTime?: string
  paymentTime?: string
  rejectReason?: string
  closeReason?: string
  remarks?: string
  processRemark?: string
  operationLogs?: OperationLog[]
  crmOrderMemo?: string
  orderContent?: string
}

interface BusinessRule {
  id: string
  businessCode: string
  jobName: string
  preMoney: number
  status: string
  createTime: string
  updateTime?: string
}

interface OrderDetailProps {
  order: Order
  businessRules: BusinessRule[]
  currentUser: { username: string; role: 'admin' | 'viewer' } | null
}

// Props
const props = defineProps<OrderDetailProps>()

// Emits
const emit = defineEmits<{
  update: [updates: Partial<Order>]
  back: []
}>()

// 响应式数据
const crmOrderId = ref(props.order.crmOrderId || '')
const processRemark = ref(props.order.crmOrderMemo || '')
const realMoney = ref(
  props.order.realMoney !== undefined ? String(props.order.realMoney) : ''
)

const permissionJson = computed(() => {
  const userInfo = ref(localStorage.getItem('pcUserInfo') ? JSON.parse(localStorage.getItem('pcUserInfo') as string) : {})
  let va = userInfo.value

  let audit = false
  let updateOrder = false

  if(va?.functions){
    let arr = va.functions.filter((item: any) => {return item.id==1})

    if(arr.length>0 && arr[0].children){
      let arr2 = arr[0].children.filter((item: any) => {return item.id==2})

      if(arr2.length>0 && arr2[0].children){
        arr2[0].children.forEach((item: any) => {
          if(item.id === 4){
            updateOrder = true
          }
          if(item.id === 5){
            audit = true
          }
        })
      }
    }
  }

  return {audit,updateOrder}
})

onMounted(()=>{
    queryLog()
})

const logData = ref<any[]>([])
const queryLog = async ()=>{
  try {
    const response = await $api.queryOrderLog({
      id: props.order.id
    })
    
    if (response.c === 0) {
      response.d.forEach((item: any)=>{
        item.detail = JSON.parse(item.parameter)
      })

      logData.value = response.d
    } else {
      ElMessage.error(response.m)
    }
  } catch (error) {
    
  }
}

// 对话框状态
const isRejectDialogOpen = ref(false)
const rejectReason = ref('')
const isCloseDialogOpen = ref(false)
const closeReason = ref('')

// 计算属性
const canEditCompleteInfo = computed(() => {
  let p = props.order

  return p.status==='-1' || (p.status==='1' && p.auditStatus!=='0' && p.auditStatus!=='1')
})
const canEditReward = computed(() => {
  let p = props.order

  return p.status==='1' && p.auditStatus!=='0' && p.auditStatus!=='1'
})
const orderMemo = computed(() => {
  let p = props.order

  if(!p.orderContent){
    return ''
  }

  return JSON.parse(p.orderContent).memo
})

// 方法
// 状态样式映射 - 使用浅色背景样式（与订单监控页保持一致）
const getstatusClass = (status: status) => {
  const statusMap = {
    '-1': 'bg-blue-100 text-blue-800',
    '1': 'bg-green-100 text-green-800',
    '0': 'bg-gray-100 text-gray-800'
  }
  return statusMap[status] || 'bg-gray-100 text-gray-800'
}
const getstatusName = (status: status) => {
  const statusMap = {
    '-1': '待办理',
    '1': '办理成功',
    '0': '已关闭'
  }
  return statusMap[status] || '--'
}

const getauditStatusClass = (status: auditStatus) => {
  const statusMap = {
    '-1': 'bg-blue-100 text-blue-800',
    '0': 'bg-purple-100 text-purple-800',
    '1': 'bg-green-100 text-green-800',
    '2': 'bg-orange-100 text-orange-800'
  }
  return statusMap[status] || 'bg-gray-100 text-gray-800'
}
const getauditStatusName = (status: auditStatus) => {
  const statusMap = {
    '-1': '未提交审核',
    '0': '待审核',
    '1': '审核通过',
    '2': '审核驳回'
  }
  return statusMap[status] || '--'
}


// crm保存
const handleSaveCrm = async ()=>{
  if (!crmOrderId.value.trim()) {
    ElMessage.error('请填写CRM订单编号')
    return
  }

  const response = await $api.updateOrderCrm({
    id: props.order.id,
    crmOrderId: crmOrderId.value,
    memo: processRemark.value
  })

  if(response.c === 0){
    ElMessage.success('保存成功')
    setTimeout(() => {
      emit('back')
    }, 1000)
  }else{
    ElMessage.error(response.m)
  }
}
const handleSaveReward = async () => {
  if (realMoney.value && realMoney.value!='null' && realMoney.value.trim()) {
    const amount = parseFloat(realMoney.value)
    if (isNaN(amount) || amount < 0) {
      ElMessage.error('请输入有效的实际发放酬金')
      return
    }
  }

  const response = await $api.updateOrderMoney({
    list: [{
      id: props.order.id,
      realMoney: realMoney.value=='null'?props.order.preMoney:realMoney.value
    }]
  })

  if(response.c === 0){
    ElMessage.success('提交成功')
    setTimeout(() => {
      emit('back')
    }, 1000)
  }else{
    ElMessage.error(response.m)
  }
  
}

// 审核通过
const handleApprove = async () => {
  try {
    const response = await $api.audioOrderList({
      list:[{
        id: props.order.id,
        auditStatus: '1'
      }]
    })
    
    if (response.c === 0) {
      ElMessage.success('审核通过！')

      setTimeout(() => {
        emit('back')
      }, 1000)
    } else {
      ElMessage.error(response.m)
    }
  } catch (error) {
    
  }
}

// 审核驳回
const handleReject = async () => {
  if (!rejectReason.value.trim()) {
    ElMessage.error('请填写驳回原因')
    return
  }

  try {
    const response = await $api.audioOrderList({
      list:[{
        id: props.order.id,
        auditStatus: '2',
        auditMemo: rejectReason.value
      }]
    })
    
    if (response.c === 0) {
      ElMessage.success('已驳回订单')
      isRejectDialogOpen.value = false
      setTimeout(()=>{
        rejectReason.value = ''
      },0)

      setTimeout(() => {
        emit('back')
      }, 1000)
    } else {
      ElMessage.error(response.m)
    }
  } catch (error) {
    
  }
}

// 关闭订单
const handleClose = async () => {
  if (!closeReason.value.trim()) {
    ElMessage.error('请填写关闭原因')
    return
  }

  const response = await $api.closeOrder({
    id: props.order.id,
    memo: closeReason.value
  })

  if(response.c === 0){

    ElMessage.success('订单已关闭')
    isCloseDialogOpen.value = false
    closeReason.value = ''
    
    setTimeout(() => {
      emit('back')
    }, 1000)
  }else{
    ElMessage.error(response.m)
  }
}

const handleAuditCommand = (command: string) => {
  if (command === 'approve') {
    handleApprove()
  } else if (command === 'reject') {
    isRejectDialogOpen.value = true
  }
}
</script>

<style scoped>
/* 自定义样式 */
:deep(.el-card) {
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-input__wrapper) {
  border-radius: 6px;
  background-color: #f3f3f5 !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-textarea__inner) {
  border-radius: 6px;
  background-color: #f3f3f5 !important;
  border: none !important;
  box-shadow: none !important;
}

/* 状态标签样式已统一使用 span + CSS 类，无需额外样式 */
</style>