工单相关代码

src/components/jiayiList/index.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+// 定义组件参数
+interface Props {
+  /** 列表数据 */
+  data: {
+    id: string
+    title: string
+    statusName: string
+    orderNo: string
+    userName: string
+    createTime: string
+  }[]
+}
+
+const props = defineProps<Props>()
+
+// 定义事件
+const emit = defineEmits<{
+  /** 刷新事件 */
+  (e: 'refresh'): void
+  /** 筛选事件 */
+  (e: 'filter'): void
+  /** 筛选确定事件 */
+  (e: 'filter-confirm'): void
+  /** 筛选取消事件 */
+  (e: 'filter-cancel'): void
+  /** 重置事件 */
+  (e: 'reset'): void
+  /** 滚动到底部事件 */
+  (e: 'load-more'): void
+}>()
+
+// 筛选框显示状态
+const showFilter = ref(false)
+// 下拉刷新状态
+const refresherTriggered = ref(false)
+
+// 处理刷新点击
+function handleRefresh() {
+  refresherTriggered.value = true
+  emit('refresh')
+  setTimeout(() => {
+    refresherTriggered.value = false
+  }, 1000)
+}
+
+// 处理筛选点击
+function handleFilter() {
+  showFilter.value = !showFilter.value
+  emit('filter')
+}
+
+// 处理筛选确定
+function handleFilterConfirm() {
+  showFilter.value = false
+  emit('filter-confirm')
+}
+
+// 处理筛选取消
+function handleFilterCancel() {
+  showFilter.value = false
+  emit('filter-cancel')
+}
+
+// 处理重置
+function handleReset() {
+  emit('reset')
+}
+
+// 跳转到工单详情页面
+function navigateToDetail(id: string) {
+  uni.navigateTo({
+    url: `/pages/archive/order/detail?id=${id}`
+  })
+}
+
+// 获取状态对应的样式
+function getStatusStyle(statusName: string) {
+  // 状态样式映射
+  const statusStyles: Record<string, { color: string, backgroundColor: string }> = {
+    '新工单': { color: '#4CAF50', backgroundColor: '#E8F5E9' },
+    '待处理': { color: '#FF9500', backgroundColor: '#FEF4EB' },
+    '已完结': { color: '#3498DB', backgroundColor: '#F0F7FF' },
+    '未审批': { color: '#FF4D4F', backgroundColor: '#FFF2F0' },
+    '已同意': { color: '#2ECC41', backgroundColor: '#E6F5E6' },
+    '已拒绝': { color: '#FF9800', backgroundColor: '#FFF5E6' },
+    '已废除': { color: '#9E9E9E', backgroundColor: '#F5F5F5' },
+    // 可以根据实际需求添加更多状态样式
+  }
+  
+  // 如果状态存在于映射中，返回对应的样式，否则返回默认样式
+  return statusStyles[statusName] || { color: '#666', backgroundColor: '#F5F5F5' }
+}
+</script>
+
+<template>
+  <view class="jiayi-list">
+    <!-- 列表卡片 -->
+    <scroll-view
+      scroll-y
+      class="scroll-container"
+      :refresher-enabled="true"
+      :refresher-triggered="refresherTriggered"
+      @refresherrefresh="handleRefresh"
+      @scrolltolower="emit('load-more')"
+    >
+      <wd-card
+        v-for="item in data"
+        :key="item.id"
+        :border="true"
+        :shadow="false"
+        style="margin: 16rpx 0;"
+        :style="{ backgroundColor: getStatusStyle(item.statusName).backgroundColor }"
+        @click="navigateToDetail(item.id)"
+      >
+        <view class="card-content">
+          <!-- 第一行：标题和状态 -->
+          <view class="flex justify-between items-center mb-3" style="height: 40rpx;">
+            <text class="font-bold text-lg text-black">{{ item.title }}</text>
+            <text :style="{ color: getStatusStyle(item.statusName).color }" class="text-sm">{{ item.statusName }}</text>
+          </view>
+          
+          <!-- 第二行：工单编号 -->
+          <view class="flex justify-between items-center mb-3">
+            <text class="text-sm text-gray-400">{{ item.orderNo }}</text>
+          </view>
+          
+          <!-- 第三行：用户名和创建时间 -->
+          <view class="flex justify-between items-center">
+            <text class="text-sm text-gray-600">{{ item.userName }}</text>
+            <text class="text-sm text-gray-600">{{ item.createTime }}</text>
+          </view>
+        </view>
+      </wd-card>
+      
+      <!-- 加载更多提示 -->
+      <view class="load-more" v-if="$parent.loadingMore">
+        <wd-loading size="small" type="ring" />
+        <text class="ml-2 text-sm text-gray-600">加载中...</text>
+      </view>
+      <view class="load-more" v-else-if="!$parent.hasMore && ($parent.listData && $parent.listData.length > 0)">
+        <text class="text-sm text-gray-600">没有更多数据了</text>
+      </view>
+    </scroll-view>
+    
+    <!-- 操作按钮 -->
+    <view class="action-buttons">
+      <view class="refresh-btn" @click="handleRefresh">
+        <wd-button type="icon" icon="refresh"  style="color: #fff;"></wd-button>
+      </view>
+      <view class="filter-btn" @click="handleFilter">
+        <wd-button type="icon" icon="filter" style="color: #fff;"></wd-button>
+      </view>
+    </view>
+    
+    <!-- 筛选框 -->
+     
+    <wd-popup
+      v-model="showFilter"
+      position="bottom"
+      round
+      :overlay="true"
+      :close-on-click-overlay="true"
+      overlay-class="popup-overlay"
+      class="filter-popup-container">
+      <view class="filter-popup" style="min-height: 400rpx;">
+        <slot name="filter-content" class="p-4">
+          <view class="text-lg font-medium mb-4">筛选条件</view>
+          <!-- 这里可以根据实际需求添加筛选条件 -->
+        </slot>
+        <view class="flex justify-end m-6">
+          <!-- <wd-button size="large" @click="handleFilterCancel" style="margin-right: 16rpx;">取消</wd-button> -->
+          <wd-button size="large" type="info" @click="handleReset" style="margin-right: 16rpx;">重置</wd-button>
+          <wd-button size="large" type="primary" @click="handleFilterConfirm">确定</wd-button>
+        </view>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<style scoped>
+.jiayi-list {
+  padding: 16rpx;
+  position: relative;
+  min-height: 100vh;
+  background-color: #ffffff;
+}
+
+.scroll-container {
+  height: 100vh;
+  padding-bottom: 200rpx;
+}
+
+.load-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx 0;
+  margin-bottom: 20rpx;
+}
+
+.card-content {
+  padding: 30rpx;
+}
+
+.action-buttons {
+  position: fixed;
+  bottom: 32rpx;
+  right: 32rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+  z-index: 9;
+}
+
+.refresh-btn,
+.filter-btn {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #3194F2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.filter-popup {
+  width: 100%;
+  max-height: 80vh;
+}
+</style>

src/pages/archive/childMenu/index.vue

@@ -95,8 +95,13 @@ function handleMenuItemClick(menu: MenuItem) {
   }
   // 根据菜单ID执行相应操作
   if (menu.component) {
+    // 构建带参数的URL
+    let url = menu.component;
+    if (menu.perms) {
+      url += (url.includes('?') ? '&' : '?') + 'perms=' + encodeURIComponent(menu.perms);
+    }
     uni.navigateTo({
-      url: menu.component,
+      url: url,
     })
   } else {
     uni.showToast({

src/pages/archive/order/comList.vue

@@ -1,14 +1,256 @@
 
 <script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import JiayiList from '@/components/jiayiList/index.vue'
+import { http } from '@/utils/request'
+
+// 接收参数
+const perms = ref('')
+
+// 动态页面标题
+const pageTitle = computed(() => {
+  switch (perms.value) {
+    case 'taskWaiting':
+      return '我的待办'
+    case 'taskFinish':
+      return '我的已办'
+    case 'taskCopyList':
+      return '我的抄送'
+    case 'delayedReview':
+      return '延时审核'
+    default:
+      return '公共订单列表'
+  }
+})
+
+// 定义页面配置
 definePage({
-  title: '公共订单列表'
+  title: '工单列表'
+})
+
+// 工单数据接口
+interface WorkOrder {
+  id: string
+  title: string
+  statusName: string
+  orderNo: string
+  userName: string
+  createTime: string
+}
+
+// 工单列表数据
+const listData = ref<WorkOrder[]>([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const pageNum = ref(1)
+const hasMore = ref(true)
+
+// 筛选相关变量
+const filterStatus = ref<string[]>([])
+const filterTimeRange = ref<string[]>([])
+const filterOrderNo = ref('')
+
+// 使用 onLoad 生命周期接收参数
+function onLoad(options: any) {
+  if (options.perms) {
+    perms.value = options.perms as string
+    console.log('收到的 perms 参数:', perms.value)
+    // 设置页面标题
+    uni.setNavigationBarTitle({
+      title: pageTitle.value
+    })
+    // 加载数据
+    fetchWorkOrderList()
+  }
+}
+
+// 获取接口 URL 根据 perms 值
+function getApiUrl() {
+  switch (perms.value) {
+    case 'taskWaiting':
+      return '/workOrder/order/list/pending'
+    case 'taskFinish':
+      return '/workOrder/order/list/over'
+    case 'taskCopyList':
+      return '/workOrder/order/list/cc'
+    case 'delayedReview':
+      return '/workOrder/order/list/delay'
+    default:
+      return '/workOrder/order/list/pending'
+  }
+}
+
+// 获取工单列表数据
+async function fetchWorkOrderList(isLoadMore = false) {
+  if (isLoadMore) {
+    loadingMore.value = true
+  } else {
+    loading.value = true
+    pageNum.value = 1
+    hasMore.value = true
+  }
+  try {
+    // 构建请求参数
+    const params = {
+      pageSize: 10,
+      pageNum: pageNum.value,
+    }
+    // 添加筛选条件
+    if (filterStatus.value.length > 0) {
+      params.statusName = filterStatus.value.join(',')
+    }
+    
+    // 添加工单编号筛选
+    if (filterOrderNo.value) {
+      params.orderNo = filterOrderNo.value
+    }
+    
+    // 获取接口 URL
+    const apiUrl = getApiUrl()
+    
+    const response = await http.get<{ rows: any[], total: number }>(apiUrl, params)
+    const newData = response.rows || []   
+    
+    // 获取状态映射
+    function getStatusName(status: string | number, permsValue: string) {
+      if (permsValue === 'delayedReview') {
+        // 待办状态映射
+        const statusMap: Record<string | number, string> = {
+          0: '未审批',
+          1: '已同意',
+          2: '已拒绝',
+          3: '已废除'
+        }
+        return statusMap[status] || ''
+      } else {
+        // 其他状态映射
+        const statusMap: Record<string | number, string> = {
+          0: '待处理',
+          1: '处理中',
+          2: '已处理',
+          3: '已退回'
+        }
+        return statusMap[status] || ''
+      }
+    }
+    
+    // 转换数据格式为组件所需的格式
+    const formattedData = newData.map(item => ({
+      id: item.orderId,
+      title: item.ticketTypeName || '',
+      statusName: item.statusName || getStatusName(item.status, perms.value) || getStatusName(item.approveStatus, perms.value),
+      orderNo: item.orderNo || '',
+      userName:item.createBy ? item.createBy + "/" + (item.stationName || '') : '',
+      createTime: item.createTime || ''
+    }))
+    
+    if (isLoadMore) {
+      listData.value = [...(listData.value || []), ...formattedData]
+    } else {
+      listData.value = formattedData
+    }
+    // 检查是否还有更多数据
+    hasMore.value = (newData || []).length === 10
+    // 增加页码
+    pageNum.value++
+  }
+  catch (error) {
+    uni.showToast({
+      title: '获取工单列表失败',
+      icon: 'none',
+    })
+  }
+  finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+// 处理刷新
+function handleRefresh() {
+  console.log('刷新数据')
+  fetchWorkOrderList()
+}
+
+// 处理加载更多
+function handleLoadMore() {
+  console.log('加载更多数据')
+  if (!loadingMore.value && hasMore.value) {
+    fetchWorkOrderList(true)
+  }
+}
+
+// 处理筛选
+function handleFilter() {
+  console.log('筛选数据')
+  // 这里可以添加筛选数据的逻辑
+}
+
+// 处理筛选确定
+function handleFilterConfirm() {
+  console.log('筛选确定', filterStatus.value, filterTimeRange.value)
+  // 重新获取数据，应用筛选条件
+  fetchWorkOrderList()
+}
+
+// 处理筛选取消
+function handleFilterCancel() {
+  console.log('筛选取消')
+  // 这里可以添加筛选取消的逻辑
+}
+
+// 处理重置
+function handleReset() {
+  console.log('重置筛选条件')
+  // 清空所有筛选条件
+  filterStatus.value = []
+  filterTimeRange.value = []
+  filterOrderNo.value = ''
+}
+
+onMounted(() => {
+  // 页面加载时获取参数并加载数据
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  if (currentPage.options.perms) {
+    perms.value = currentPage.options.perms as string
+    console.log('收到的 perms 参数:', perms.value)
+    // 设置页面标题
+    uni.setNavigationBarTitle({
+      title: pageTitle.value
+    })
+    fetchWorkOrderList()
+  }
 })
 </script>
 
 <template>
-  <view class="page">
-    <view class="flex items-center justify-center h-full">
-      <text class="text-lg">公共订单列表页面</text>
-    </view>
+  <view class="page min-h-screen bg-gray-100">
+    <JiayiList
+      :data="listData"
+      @refresh="handleRefresh"
+      @filter="handleFilter"
+      @filter-confirm="handleFilterConfirm"
+      @filter-cancel="handleFilterCancel"
+      @reset="handleReset"
+      @load-more="handleLoadMore"
+    >
+      <template #filter-content>
+        <view class="p-4">
+          <view class="text-lg font-medium mb-4">筛选条件</view>
+          <!-- 工单编号搜索 -->
+          <view class="mb-4">
+            <text class="block mb-2">工单编号</text>
+            <wd-input v-model="filterOrderNo" placeholder="请输入工单编号" />
+          </view>
+        </view>
+      </template>
+    </JiayiList>
   </view>
 </template>
+
+<style scoped>
+.page {
+  padding-bottom: 100rpx;
+}
+</style>

src/pages/archive/order/detail.vue

@@ -0,0 +1,549 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { http } from '@/utils/request'
+
+// 定义页面配置
+definePage({
+  title: '工单详情'
+})
+
+// 工单详情接口
+interface WorkOrderDetail {
+  id: string
+  orderNo: string
+  statusName: string
+  status: string
+  createBy: string
+  ticketTypeName: string
+  createTime: string
+  stationName?: string
+  contact?: string
+  phone?: string
+  content?: string
+  attachments?: string
+}
+
+// 流程信息接口
+interface FlowInfo {
+  instanceId: string
+}
+
+// 工单流程记录接口
+interface WorkOrderRecord {
+  id: string
+  orderId: string
+  operationContent: string
+  status: string
+  operatorName: string
+  operationTime: string
+  operationType: string
+  approveName?: string
+  workOrderProcessRecords?: Array<{
+    processContent: string
+    attachmentsUrl?: string
+  }>
+  workOrderDelay?: Array<{
+    delayReason: string
+    delayDuration: string
+    approveRemark: string
+    approveStatus: string
+    approveTime: string
+    attachmentsUrl?: string
+  }>
+  message?: string
+}
+
+// 页面数据
+const workOrderDetail = ref<WorkOrderDetail>({
+  id: '',
+  orderNo: '',
+  statusName: '',
+  status: '',
+  createBy: '',
+  ticketTypeName: '',
+  createTime: '',
+  stationName: '',
+  contact: '',
+  phone: '',
+  content: '',
+  attachments: ''
+})
+
+const workOrderRecords = ref<WorkOrderRecord[]>([])
+const loading = ref(true)
+const recordsLoading = ref(false)
+
+// 获取工单ID（从路由参数中获取）
+const getWorkOrderId = () => {
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  return currentPage.options.id || ''
+}
+
+// 获取工单详情
+async function fetchWorkOrderDetail() {
+  const id = getWorkOrderId()
+  if (!id) return
+  
+  try {
+    loading.value = true
+    const response = await http.get<WorkOrderDetail>(`/workOrder/order/${id}`)
+    workOrderDetail.value = response || workOrderDetail.value
+    
+    // 获取工单流程记录
+    await fetchWorkOrderRecords(id)
+  } catch (error) {
+    console.error('获取工单详情失败:', error)
+    uni.showToast({
+      title: '获取工单详情失败',
+      icon: 'none'
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+// 获取工单流程记录
+async function fetchWorkOrderRecords(orderId: string) {
+  try {
+    recordsLoading.value = true
+    const response = await http.get<WorkOrderRecord[]>('/workOrderRecord/record/list', {
+      orderId: orderId
+    })
+    workOrderRecords.value = response.rows || []
+  } catch (error) {
+    console.error('获取工单流程记录失败:', error)
+    uni.showToast({
+      title: '获取工单流程记录失败',
+      icon: 'none'
+    })
+  } finally {
+    recordsLoading.value = false
+  }
+}
+
+// 复制工单编号
+function handleCopy(text: string) {
+  uni.setClipboardData({
+    data: text,
+    success: () => {
+      uni.showToast({
+        title: '复制成功',
+        icon: 'success'
+      })
+    }
+  })
+}
+
+// 获取状态样式
+function getStatusClass(statusName: string) {
+  switch (statusName) {
+    case '新工单':
+      return 'status-new'
+    case '待处理':
+      return 'status-pending'
+    case '已完结':
+      return 'status-completed'
+    default:
+      return 'status-default'
+  }
+}
+
+// 编辑按钮
+function handleEdit() {
+  console.log('编辑工单')
+}
+
+// 删除按钮
+function handleDelete() {
+  console.log('删除工单')
+}
+
+// 提交按钮
+function handleSubmit() {
+  console.log('提交工单')
+}
+
+// 页面加载时获取工单详情
+onMounted(() => {
+  fetchWorkOrderDetail()
+})
+</script>
+<template>
+  <view class="work-order-detail">
+    <!-- 标题区域 -->
+    <view class="detail-header">
+      <view class="flex justify-between items-center mb-3">
+        <view class="flex items-center gap-2">
+          <text class="text-2xl font-bold">{{ workOrderDetail.orderNo }}</text>
+          <wd-icon name="copy" size="20px" @click="handleCopy(workOrderDetail.orderNo)"></wd-icon>
+          <view :class="['status-tag', getStatusClass(workOrderDetail.statusName)]">
+            {{ workOrderDetail.statusName }}
+          </view>
+        </view>
+      </view>
+      
+      <view class="flex items-center gap-2 mb-4">
+        <view class="flex flex-col gap-2">
+          <view class="flex items-center gap-1 text-gray-500">
+            <wd-icon name="user" size="16px"></wd-icon>
+            创建人: {{ workOrderDetail.createBy + '/' + (workOrderDetail.stationName || '无') }}
+          </view>
+          <view class="flex items-center gap-1 text-gray-500">  
+            <wd-icon name="transfer" size="16px"></wd-icon>
+            流程分类: {{ workOrderDetail.ticketTypeName }}
+          </view>
+          <view class="flex items-center gap-1 text-gray-500">
+            <wd-icon name="time" size="16px"></wd-icon>
+            提交时间: {{ workOrderDetail.createTime }}
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 工单详情内容 -->
+    <view class="detail-content">
+      <view class="detail-title">
+        <text class="text-lg font-medium">工单详情</text>
+      </view>
+
+      <!-- 基本信息 -->
+      <wd-card :border="true" :shadow="false" style="margin-bottom: 16rpx;">
+        <view class="card-content">
+          <view class="info-item flex items-center py-2">
+            <text class="info-label w-40">工单类型：</text>
+            <text class="info-value flex-1">{{ workOrderDetail.ticketTypeName }}</text>
+          </view>
+          <view class="info-item flex items-center py-2">
+            <text class="info-label w-40">场站：</text>
+            <text class="info-value flex-1">{{ workOrderDetail.stationName || '无' }}</text>
+          </view>
+          <view class="info-item flex items-center py-2">
+            <text class="info-label w-40">联系人：</text>
+            <text class="info-value flex-1">{{ workOrderDetail.contact || '无' }}</text>
+          </view>
+          <view class="info-item flex items-center py-2">
+            <text class="info-label w-40">联系电话：</text>
+            <text class="info-value flex-1">{{ workOrderDetail.phone || '无' }}</text>
+          </view>
+          
+          <view class="info-item flex flex-col">
+            <text class="info-label w-40">提报内容：</text>
+            <text class="info-value flex-1">{{ workOrderDetail.content || '无' }}</text>
+          </view>
+          
+          <!-- 附件 -->
+          <view class="info-item flex flex-col mt-4">
+            <text class="info-label w-40">附件：</text>
+            <view v-if="workOrderDetail.attachmentsUrl.length > 0" class="flex flex-wrap gap-2">
+              <view 
+                v-for="(url, index) in workOrderDetail.attachmentsUrl" 
+                :key="index" 
+                class="w-20 h-20 cursor-pointer rounded overflow-hidden"
+              >
+                <wd-img :width="100" :height="100" :src="url" :enable-preview="true" />
+              </view>
+            </view>
+            <text v-else class="info-value">无</text>
+          </view>
+        </view>
+      </wd-card>
+       <view class="detail-title">
+        <text class="text-lg font-medium">工单流程</text>
+      </view>
+      <!-- 审批流程 -->
+      <wd-card :border="true" :shadow="false">
+        <view class="card-content">
+          <view v-if="workOrderRecords.length > 0">
+            <wd-steps :active="workOrderRecords.length - 1" vertical dot>
+              <wd-step 
+                v-for="(record, index) in workOrderRecords" 
+                :key="record.id"
+                :title="record.operationContent">
+                <template #description>
+                  <view class="mt-2 ml-4">
+                    <text class="text-sm font-medium">{{ `${record.operatorName} · ${record.operationTime}` }}</text>
+                    <!-- 处理内容 -->
+                    <view v-if="record.workOrderProcessRecords?.[0]?.processContent" class="mb-2 p-2 bg-gray-50 rounded">
+                      <text class="text-sm font-medium">处理内容：</text>
+                      <text class="text-sm">{{ record.workOrderProcessRecords[0].processContent }}</text>
+                      <!-- 处理内容附件 -->
+                      <view v-if="record.workOrderProcessRecords[0].attachmentsUrl" class="mt-2">
+                        <view class="flex flex-wrap gap-2">
+                          <view 
+                            v-for="(url, index) in record.workOrderProcessRecords[0].attachmentsUrl" 
+                            :key="index" 
+                            class="w-20 h-20 cursor-pointer rounded overflow-hidden">
+                            <wd-img :width="100" :height="100" :src="url" :enable-preview="true" />
+                          </view>
+                        </view>
+                      </view>
+                    </view>
+                    
+                    <!-- 延时申请 -->
+                    <view v-if="record.operationType === 'APPLY_DELAY' && record.workOrderDelay?.[0]" class="mb-2 p-2 bg-gray-50 rounded">
+                      <text class="text-sm font-medium">延时原因：</text>
+                      <text class="text-sm">{{ record.workOrderDelay[0].delayReason }}</text>
+                      <text v-if="record.workOrderDelay[0].delayDuration" class="text-sm block mt-1">
+                        延时时长：{{ record.workOrderDelay[0].delayDuration }} 小时
+                      </text>
+                      <!-- 延时申请附件 -->
+                      <view v-if="record.workOrderDelay[0].attachmentsUrl" class="mt-2">
+                        <view class="flex flex-wrap gap-2">
+                          <view 
+                            v-for="(url, index) in record.workOrderProcessRecords[0].attachmentsUrl" 
+                            :key="index" 
+                            class="w-20 h-20 cursor-pointer rounded overflow-hidden"
+                          >
+                            <wd-img :width="100" :height="100" :src="url" :enable-preview="true" />
+                          </view>
+                        </view>
+                      </view>
+                    </view>
+                    
+                    <!-- 延时审批 -->
+                    <view v-if="record.operationType === 'AUDIT_DELAY' && record.workOrderDelay?.[0]" class="mb-2 p-2 bg-gray-50 rounded">
+                      <text class="text-sm font-medium">审批意见：</text>
+                      <text class="text-sm">{{ record.workOrderDelay[0].approveRemark }}</text>
+                      <text v-if="record.workOrderDelay[0].approveStatus" class="text-sm block mt-1">
+                        审核状态：{{ record.workOrderDelay[0].approveStatus === '1' ? '同意' : '拒绝' }}
+                      </text>
+                      <text v-if="record.workOrderDelay[0].approveTime" class="text-sm block mt-1">
+                        新截止时间：{{ record.workOrderDelay[0].approveTime }}
+                      </text>
+                    </view>
+                    
+                    <!-- 其他消息 -->
+                    <view v-if="record.message && !['PROCESS', 'APPLY_DELAY', 'AUDIT_DELAY'].includes(record.operationType)" class="mb-2 p-2 bg-gray-50 rounded">
+                      <text class="text-sm">{{ record.message }}</text>
+                    </view>
+                  </view>
+                </template>
+              </wd-step>
+            </wd-steps>
+          </view>
+          <text v-else>暂无工单流程记录</text>
+        </view>
+      </wd-card>
+    </view>
+    
+    <!-- 底部悬浮按钮 -->
+    <view v-if="workOrderDetail.status === 'new'" class="bottom-actions">
+      <wd-button size="medium" custom-class="action-btn" @click="handleEdit">
+        编辑
+      </wd-button>
+      <wd-button type="error" size="medium" custom-class="action-btn" @click="handleDelete">
+        删除
+      </wd-button>
+      <wd-button size="medium" custom-class="action-btn" @click="handleSubmit">
+        提交
+      </wd-button>
+    </view>
+  </view>
+</template>
+
+
+
+<style scoped>
+.work-order-detail {
+  padding: 20rpx;
+  padding-bottom: 160rpx;
+  background-color: #ffffff;
+  min-height: 100vh;
+}
+
+.detail-header {
+  background-color: #fff;
+  padding: 20rpx;
+}
+
+.status-tag {
+  padding: 4rpx 12rpx;
+  border-radius: 16rpx;
+  font-size: 24rpx;
+}
+
+.status-new {
+  background-color: #E8F5E9;
+  color: #4CAF50;
+}
+
+.status-pending {
+  background-color: #FEF4EB;
+  color: #FF9500;
+}
+
+.status-completed {
+  background-color: #F0F7FF;
+  color: #3498DB;
+}
+
+.status-default {
+  background-color: #F5F5F5;
+  color: #666;
+}
+
+.avatar {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  background-color: #3194F2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24rpx;
+}
+
+.detail-content {
+  background-color: #fff;
+  padding: 20rpx;
+}
+
+.card-content {
+  padding: 20rpx 0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20rpx;
+}
+
+.info-item {
+  display: flex;
+  gap: 16rpx;
+}
+
+.info-item.flex-col {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.w-40 {
+  width: 160rpx;
+  flex-shrink: 0;
+}
+
+.info-label {
+  font-size: 26rpx;
+  color: #666;
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.5;
+}
+
+.preview-container {
+  width: 100%;
+  height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.gap-2 {
+  gap: 16rpx;
+}
+
+.gap-4 {
+  gap: 32rpx;
+}
+
+.mb-3 {
+  margin-bottom: 24rpx;
+}
+
+.mb-4 {
+  margin-bottom: 32rpx;
+}
+
+.mt-4 {
+  margin-top: 32rpx;
+}
+
+.text-2xl {
+  font-size: 36rpx;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.text-gray-500 {
+  color: #999;
+  font-size: 24rpx;
+}
+
+.detail-title {
+  margin: 0 0 16rpx 0;
+  padding-bottom: 16rpx;
+  border-bottom: 1rpx solid #e5e7eb;
+}
+
+.text-lg {
+  font-size: 32rpx;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.bg-primary {
+  background-color: #3194F2;
+}
+
+.size-20px {
+  width: 20px;
+  height: 20px;
+}
+
+.size-28px {
+  width: 28px;
+  height: 28px;
+}
+
+.rounded-full {
+  border-radius: 50%;
+}
+
+.text-white {
+  color: white;
+}
+
+.bottom-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 20rpx;
+  display: flex;
+  gap: 20rpx;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
+  z-index: 100;
+}
+
+.action-btn {
+  flex: 1;
+}
+</style>

src/pages/archive/order/myDocument.vue

@@ -1,14 +1,224 @@
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import JiayiList from '@/components/jiayiList/index.vue'
+import { http } from '@/utils/request'
+
 definePage({
   title: '我的发起'
 })
+
+// 工单数据接口
+interface WorkOrder {
+  id: string
+  title: string
+  statusName: string
+  orderNo: string
+  userName: string
+  createTime: string
+}
+
+// 工单列表数据
+const listData = ref<WorkOrder[]>([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const pageNum = ref(1)
+const hasMore = ref(true)
+
+// 获取工单列表数据
+async function fetchWorkOrderList(isLoadMore = false) {
+  if (isLoadMore) {
+    loadingMore.value = true
+  } else {
+    loading.value = true
+    pageNum.value = 1
+    hasMore.value = true
+  }
+  try {
+    // 构建请求参数
+    const params = {
+      pageSize: 10,
+      pageNum: pageNum.value,
+    }
+    
+    // 添加筛选条件
+    if (filterStatus.value.length > 0) {
+      params.statusName = filterStatus.value.join(',')
+    }
+    
+    // 添加新的筛选条件
+    console.log('filterStatusValue.value:', filterContent.value)
+    if (filterContent.value) {
+      params.content = filterContent.value
+    }
+    
+    if (filterStatusValue.value) {
+      params.status = filterStatusValue.value
+    }
+    
+    if (filterOrderNo.value) {
+      params.orderNo = filterOrderNo.value
+    }
+    
+    const response = await http.get<{ rows: any[], total: number }>('/workOrder/order/myList', params)
+    const newData = response.rows || []   
+    
+    // 转换数据格式为组件所需的格式
+    const formattedData = newData.map(item => ({
+      id: item.id,
+      title: item.ticketTypeName || '',
+      statusName: item.statusName || '',
+      orderNo: item.orderNo || '',
+      userName: item.createBy+"/"+item.stationName || '',
+      createTime: item.createTime || ''
+    }))
+    
+    if (isLoadMore) {
+      listData.value = [...(listData.value || []), ...formattedData]
+    } else {
+      listData.value = formattedData
+    }
+    // 检查是否还有更多数据
+    hasMore.value = (newData || []).length === 10
+    // 增加页码
+    pageNum.value++
+  }
+  catch (error) {
+    console.error('获取工单列表失败:', error)
+    uni.showToast({
+      title: '获取工单列表失败',
+      icon: 'none',
+    })
+  }
+  finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+// 处理刷新
+function handleRefresh() {
+  console.log('刷新数据')
+  fetchWorkOrderList()
+}
+
+// 处理加载更多
+function handleLoadMore() {
+  console.log('加载更多数据')
+  if (!loadingMore.value && hasMore.value) {
+    fetchWorkOrderList(true)
+  }
+}
+
+// 筛选相关变量
+const filterStatus = ref<string[]>([])
+const filterTimeRange = ref<string[]>([])
+const filterContent = ref('')
+const filterStatusValue = ref('')
+const filterOrderNo = ref('')
+
+// 工单状态字典数据
+const statusColumns = ref<Array<{ value: string; label: string }>>([])
+
+// 获取工单状态字典数据
+async function fetchStatusDict() {
+  try {
+    const response = await http.get<any[]>('/system/dict/data/type/ticket_status')
+    statusColumns.value = response.map(item => ({
+      value: item.dictValue,
+      label: item.dictLabel
+    }))
+  } catch (error) {
+    console.error('获取工单状态字典失败:', error)
+  }
+}
+
+// 处理状态选择确认
+function handleStatusConfirm({ value }: { value: string }) {
+  filterStatusValue.value = value
+}
+
+// 处理筛选
+function handleFilter() {
+  console.log('筛选数据')
+  // 这里可以添加筛选数据的逻辑
+}
+
+// 处理筛选确定
+function handleFilterConfirm() {
+  console.log('筛选确定', filterStatus.value, filterTimeRange.value)
+  // 重新获取数据，应用筛选条件
+  fetchWorkOrderList()
+}
+
+// 处理筛选取消
+function handleFilterCancel() {
+  console.log('筛选取消')
+  // 这里可以添加筛选取消的逻辑
+}
+
+// 处理重置
+function handleReset() {
+  console.log('重置筛选条件')
+  // 清空所有筛选条件
+  filterStatus.value = []
+  filterContent.value = ''
+  filterStatusValue.value = ''
+  filterOrderNo.value = ''
+  filterTimeRange.value = []
+}
+
+onMounted(() => {
+  fetchWorkOrderList()
+  fetchStatusDict()
+})
 </script>
 
 <template>
-  <view class="page">
-    <view class="flex items-center justify-center h-full">
-      <text class="text-lg">我的发起页面</text>
-    </view>
+  <view class="page min-h-screen bg-gray-100">
+    <JiayiList
+      :data="listData"
+      @refresh="handleRefresh"
+      @filter="handleFilter"
+      @filter-confirm="handleFilterConfirm"
+      @filter-cancel="handleFilterCancel"
+      @reset="handleReset"
+      @load-more="handleLoadMore"
+    >
+      <template #filter-content>
+        <view class="p-4">
+          <view class="text-lg font-medium mb-4">筛选条件</view>
+          
+          <!-- 工单内容搜索 -->
+          <view class="mb-4">
+            <text class="block mb-2">工单内容</text>
+            <wd-input v-model="filterContent" placeholder="请输入工单内容" />
+          </view>
+          
+          <!-- 工单状态下拉框 -->
+          <view class="mb-4">
+            <text class="block mb-2">工单状态</text>
+            <wd-picker 
+              :columns="[statusColumns]" 
+              v-model="filterStatusValue" 
+              @confirm="handleStatusConfirm"
+            />
+          </view>
+          
+          <!-- 工单编号搜索 -->
+          <view class="mb-4">
+            <text class="block mb-2">工单编号</text>
+            <wd-input v-model="filterOrderNo" placeholder="请输入工单编号" />
+          </view>
+          
+        </view>
+      </template>
+    </JiayiList>
   </view>
 </template>
+
+<style scoped>
+.page {
+  padding-bottom: 100rpx;
+}
+</style>