yoe-market-web/src/views/order/orderService/serviceDetail.vue

<template>
  <div class="p-4">
    <!-- 顶部返回按钮 -->
    <div class="mb-4">
      <el-button @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>
        返回
      </el-button>
      <span class="ml-4 text-lg font-medium">华南上单</span>
    </div>

    <el-row :gutter="20">
      <!-- 左侧：工单信息 -->
      <el-col :span="16">
        <!-- 工单信息 -->
        <el-card shadow="never" class="mb-4">
          <template #header>
            <span class="font-medium">工单信息</span>
          </template>

          <!-- 基础信息 -->
          <div class="mb-4">
            <div class="text-sm text-gray-500 mb-2">基础信息</div>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">工单编号：</span>
                  <span class="value">{{ orderInfo.orderNo }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">客户名称：</span>
                  <span class="value">{{ orderInfo.customerName }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">联系人：</span>
                  <span class="value">{{ orderInfo.contactPerson }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-2">
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">联系电话：</span>
                  <span class="value">{{ orderInfo.contactPhone }}</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 派单信息 -->
          <div class="mb-4">
            <div class="text-sm text-gray-500 mb-2">派单信息</div>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">派单人员：</span>
                  <span class="value">{{ orderInfo.assignPerson }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">联系方式：</span>
                  <span class="value">{{ orderInfo.assignPhone }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-2">
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">工单时间：</span>
                  <span class="value">{{ orderInfo.orderTime }}</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">重点：</span>
                  <span class="value">{{ orderInfo.priority }}</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 完成信息 -->
          <div>
            <div class="text-sm text-gray-500 mb-2">完成信息</div>
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="info-item">
                  <span class="label">完成时间：</span>
                  <span class="value">{{ orderInfo.completeTime }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-2">
              <el-col :span="16">
                <div class="info-item">
                  <span class="label">完成地址：</span>
                  <span class="value">{{ orderInfo.completeAddress }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-2">
              <el-col :span="16">
                <div class="info-item">
                  <span class="label">完成状态：</span>
                  <span class="value">{{ orderInfo.completeStatus }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 接单/派工 -->
        <el-card shadow="never">
          <template #header>
            <span class="font-medium">接单 / 派工</span>
          </template>

          <el-form :model="dispatchForm" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="技术人员" prop="technicianId">
                  <el-input v-model="dispatchForm.technician" placeholder="请输入" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="technicianPhone">
                  <el-input v-model="dispatchForm.technicianPhone" placeholder="请输入" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="预约时间" prop="appointmentTime">
                  <el-date-picker
                    v-model="dispatchForm.appointmentTime"
                    type="datetime"
                    placeholder="请选择"
                    class="w-full"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="现场地址" prop="siteAddress">
                  <el-input v-model="dispatchForm.siteAddress" placeholder="请输入现场地址" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="上传附件" prop="attachments">
                  <el-upload class="upload-demo" action="#" :auto-upload="false" :file-list="fileList">
                    <el-button type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="预期解决" prop="expectedSolution">
                  <el-input v-model="dispatchForm.expectedSolution" type="textarea" :rows="4" placeholder="请输入预期解决方案" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <!-- 右侧：操作进度时间线 -->
      <el-col :span="8">
        <el-card shadow="never">
          <template #header>
            <span class="font-medium">操作 / 进度</span>
          </template>

          <el-timeline>
            <el-timeline-item v-for="(item, index) in timeline" :key="index" :timestamp="item.timestamp" placement="top">
              <div class="timeline-content">
                <div class="font-medium">{{ item.title }}</div>
                <div class="text-sm text-gray-500 mt-1">{{ item.description }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="ServiceDetail">
import { ArrowLeft } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

// 工单信息
const orderInfo = reactive({
  orderNo: 'HL',
  customerName: '华南上单',
  contactPerson: '张三',
  contactPhone: '13800138000',
  assignPerson: '中联',
  assignPhone: '1',
  orderTime: '2022-11-17 09:00:00',
  priority: '1',
  completeTime: '2022-11-17 09:00:00',
  completeAddress: '广东省深圳市',
  completeStatus: '已完成'
});

// 派工表单
const dispatchForm = reactive({
  technician: '',
  technicianPhone: '',
  appointmentTime: '',
  siteAddress: '',
  expectedSolution: ''
});

// 文件列表
const fileList = ref([]);

// 时间线数据
const timeline = ref([
  {
    timestamp: '2022-11-17 09:00:00',
    title: '工单创建',
    description: '工单已创建'
  },
  {
    timestamp: '2022-11-17 10:00:00',
    title: '已派单',
    description: '已分配给技术人员'
  },
  {
    timestamp: '2022-11-17 14:00:00',
    title: '进行中',
    description: '技术人员正在处理'
  }
]);

// 返回
const handleBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  .label {
    color: #606266;
    font-size: 14px;
    white-space: nowrap;
  }

  .value {
    color: #303133;
    font-size: 14px;
    margin-left: 4px;
  }
}

.timeline-content {
  padding: 8px 0;
}

:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-card__body) {
  padding: 20px;
}
</style>