From 7b1f488f9c67e39bceb23c97b9d5c7379e937cb9 Mon Sep 17 00:00:00 2001
From: liugongyu <290219706@qq.com>
Date: Wed, 17 Dec 2025 10:18:34 +0800
Subject: [PATCH] 封装下图片上传

---
 common/utils/useUploadImgs.ts                  | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 components/upload-image/upload-image.vue       | 189 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 pages-sub/daily/maintain-manage/add-record.vue | 606 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 pages-sub/daily/quick-order/add-order.vue      |  18 ++++--------------
 pages-sub/problem/work-order-manage/index.vue  | 547 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 pages.json                                     |   3 ++-
 pages/login/index.vue                          |  26 --------------------------
 7 files changed, 1039 insertions(+), 504 deletions(-)
 create mode 100644 common/utils/useUploadImgs.ts
 create mode 100644 pages-sub/problem/work-order-manage/index.vue

diff --git a/common/utils/useUploadImgs.ts b/common/utils/useUploadImgs.ts
new file mode 100644
index 0000000..6f17211
--- /dev/null
+++ b/common/utils/useUploadImgs.ts
@@ -0,0 +1,154 @@
+import { ref, type Ref } from 'vue'
+import { uploadImages } from '@/common/utils/upload'
+import type { UniFormRef } from '@/uni_modules/uview-plus/types'
+
+// 定义上传配置类型
+export interface UploadImgConfig {
+    maxCount?: number // 最大上传数量，默认3
+    uploadText?: string // 上传按钮文案
+    sizeType?: UniApp.UploadFileOption['sizeType'] // 图片压缩类型
+    formRef: Ref<UniFormRef | null> // 表单ref，用于校验
+    fieldName: string // 表单校验字段名（如problemImgs）
+}
+
+// 定义图片项类型
+export interface UploadImgItem {
+    url: string
+    status: 'uploading' | 'success' | 'failed'
+    message: string
+    [key: string]: any // 兼容其他字段
+}
+
+/**
+ * 图片上传组合式函数（支持多实例复用）
+ * @param config 上传配置
+ * @returns 上传相关方法和状态
+ */
+export function useUploadImgs(config: UploadImgConfig) {
+    // 默认配置
+    const defaultConfig = {
+        maxCount: 3,
+        uploadText: '选择图片',
+        sizeType: ['compressed'] as UniApp.UploadFileOption['sizeType'],
+        ...config
+    }
+
+    // 图片列表
+    const imgList = ref<UploadImgItem[]>([])
+
+    /**
+     * 删除图片
+     */
+    const deleteImg = (event: { index: number }) => {
+        imgList.value.splice(event.index, 1)
+        // 删除后重新校验
+        defaultConfig.formRef.value?.validateField(defaultConfig.fieldName)
+        uni.showToast({ title: '图片删除成功', icon: 'success' })
+    }
+
+    /**
+     * 上传图片
+     */
+    const uploadImgs = async (event: { file: UniApp.ChooseImageSuccessCallbackResult | UniApp.ChooseImageSuccessCallbackResult[] }) => {
+        const fileList = Array.isArray(event.file) ? event.file : [event.file]
+        const targetImgList = imgList.value
+
+        // 过滤超出最大数量的图片
+        if (targetImgList.length + fileList.length > defaultConfig.maxCount) {
+            uni.showToast({ title: `最多只能上传${defaultConfig.maxCount}张图片`, icon: 'none' })
+            return
+        }
+
+        const filePaths = fileList.map(item => item.url)
+        const tempItems = fileList.map(item => ({
+            ...item,
+            status: 'uploading' as const,
+            message: '上传中'
+        }))
+        const startIndex = targetImgList.length
+        targetImgList.push(...tempItems)
+
+        try {
+            const uploadResultUrls = await uploadImages({
+                filePaths: filePaths,
+                ignoreError: true
+            })
+
+            // 更新上传成功的图片
+            uploadResultUrls.forEach((url, index) => {
+                if (targetImgList[startIndex + index]) {
+                    targetImgList.splice(startIndex + index, 1, {
+                        ...fileList[index],
+                        status: 'success' as const,
+                        message: '',
+                        url: url
+                    })
+                }
+            })
+
+            // 处理上传失败的图片
+            if (uploadResultUrls.length < fileList.length) {
+                const failCount = fileList.length - uploadResultUrls.length
+                for (let i = uploadResultUrls.length; i < fileList.length; i++) {
+                    if (targetImgList[startIndex + i]) {
+                        targetImgList.splice(startIndex + i, 1, {
+                            ...fileList[i],
+                            status: 'failed' as const,
+                            message: '上传失败'
+                        })
+                    }
+                }
+                uni.showToast({ title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none' })
+            } else {
+                uni.showToast({ title: `成功上传${fileList.length}张图片`, icon: 'success' })
+            }
+
+            // 上传完成后校验
+            defaultConfig.formRef.value?.validateField(defaultConfig.fieldName)
+        } catch (err) {
+            console.error(`【${defaultConfig.fieldName}】图片上传失败：`, err)
+            // 标记所有上传失败
+            for (let i = 0; i < fileList.length; i++) {
+                if (targetImgList[startIndex + i]) {
+                    targetImgList.splice(startIndex + i, 1, {
+                        ...fileList[i],
+                        status: 'failed' as const,
+                        message: '上传失败'
+                    })
+                }
+            }
+            uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
+            // 上传失败后校验
+            defaultConfig.formRef.value?.validateField(defaultConfig.fieldName)
+        }
+    }
+
+    /**
+     * 获取成功上传的图片URL列表
+     */
+    const getSuccessImgUrls = () => {
+        return imgList.value.filter(item => item.status === 'success').map(item => item.url)
+    }
+
+    /**
+     * 图片校验规则（供表单使用）
+     */
+    const imgValidateRule = {
+        required: true,
+        message: `请上传${defaultConfig.uploadText.replace('选择', '')}`,
+        trigger: 'change',
+        validator: (rule: any, value: any, callback: (error?: Error) => void) => {
+            const hasSuccessImg = imgList.value.some(item => item.status === 'success')
+            hasSuccessImg ? callback() : callback(new Error(`请上传至少1张${defaultConfig.uploadText.replace('选择', '')}`))
+        }
+    }
+
+    return {
+        imgList,
+        uploadImgs,
+        deleteImg,
+        getSuccessImgUrls,
+        imgValidateRule,
+        uploadConfig: defaultConfig
+    }
+}
\ No newline at end of file
diff --git a/components/upload-image/upload-image.vue b/components/upload-image/upload-image.vue
index 7c75aed..8f42448 100644
--- a/components/upload-image/upload-image.vue
+++ b/components/upload-image/upload-image.vue
@@ -1,200 +1,11 @@
 <template>
-  <view class="upload-images-container">
-    <!-- 已上传图片预览（uView Album组件） -->
-    <up-album
-        v-if="imageList.length > 0"
-        :list="imageList"
-        :max-count="maxCount"
-        :show-delete="showDelete"
-        @delete="handleDelete"
-        @preview="handlePreview"
-        :border-radius="8"
-        :column="column"
-        :gap="15"
-    ></up-album>
 
-    <!-- 上传按钮 -->
-    <up-upload
-        class="upload-btn"
-        :disabled="imageList.length >= maxCount"
-        :multiple="true"
-        :max-count="maxCount - imageList.length"
-        @after-read="handleAfterRead"
-        :previewFullImage="true"
-    >
-      <view class="upload-btn-inner">
-        <up-icon name="plus" color="#999" size="24"></up-icon>
-        <text class="upload-tips" v-if="imageList.length < maxCount">上传图片</text>
-        <text class="upload-tips" v-else>已达上限</text>
-      </view>
-    </up-upload>
-  </view>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits, withDefaults } from 'vue';
-import { uploadImages } from '@/common/utils/upload.js';
 
-
-// 定义Props
-const props = withDefaults(
-    defineProps<{
-      // 已上传图片列表（双向绑定）
-      value: string[];
-      // 最大上传数量
-      maxCount?: number;
-      // 是否显示删除按钮
-      showDelete?: boolean;
-      // 相册列数
-      column?: number;
-      // 上传文件key名
-      fileKey?: string;
-      // 自定义请求头（覆盖默认）
-      header?: Record<string, string>;
-      // 上传失败是否继续（多图时）
-      ignoreError?: boolean;
-    }>(),
-    {
-      maxCount: 9,
-      showDelete: true,
-      column: 3,
-      fileKey: 'file',
-      ignoreError: true
-    }
-);
-
-// 定义Emits
-const emit = defineEmits<{
-  // 双向绑定更新图片列表
-  (e: 'update:value', val: string[]): void;
-  // 单张/多张上传成功
-  (e: 'upload-success', urls: string[]): void;
-  // 上传失败
-  (e: 'upload-error', err: any): void;
-  // 删除图片
-  (e: 'delete-image', index: number): void;
-  // 预览图片
-  (e: 'preview-image', index: number): void;
-}>();
-
-// 内部维护的图片列表
-const imageList = ref([...props.value]);
-
-// 监听父组件传入的value变化
-watch(
-    () => props.value,
-    (newVal) => {
-      imageList.value = [...newVal];
-    },
-    { immediate: true }
-);
-
-// 监听内部列表变化，同步给父组件
-watch(
-    () => imageList.value,
-    (newVal) => {
-      emit('update:value', [...newVal]);
-    },
-    { deep: true }
-);
-
-/**
- * 选择图片后触发（上传核心逻辑）
- */
-const handleAfterRead = async (event: any) => {
-  // 获取选择的图片临时路径
-  const filePaths = event.file.map((item: any) => item.url);
-
-  try {
-    uni.showLoading({ title: '上传中...' });
-    // 调用公共上传方法
-    const uploadUrls = await uploadImages({
-      filePaths,
-      fileKey: props.fileKey,
-      header: props.header,
-      ignoreError: props.ignoreError
-    });
-
-    if (uploadUrls.length > 0) {
-      // 合并到已上传列表
-      imageList.value = [...imageList.value, ...uploadUrls];
-      // 通知父组件上传成功
-      emit('upload-success', uploadUrls);
-      uni.showToast({ title: `成功上传${uploadUrls.length}张图片`, icon: 'success' });
-    }
-  } catch (err) {
-    emit('upload-error', err);
-    console.error('图片上传失败：', err);
-  } finally {
-    uni.hideLoading();
-  }
-};
-
-/**
- * 删除图片
- */
-const handleDelete = (index: number) => {
-  imageList.value.splice(index, 1);
-  emit('delete-image', index);
-  uni.showToast({ title: '删除成功', icon: 'success' });
-};
-
-/**
- * 预览图片
- */
-const handlePreview = (index: number) => {
-  emit('preview-image', index);
-  // 原生预览（可选）
-  uni.previewImage({
-    urls: imageList.value,
-    current: imageList.value[index]
-  });
-};
 </script>
 
 <style lang="scss" scoped>
-.upload-images-container {
-  padding: 10rpx 0;
-}
-
-// 上传按钮样式
-.upload-btn {
-  margin-top: 15rpx;
-  width: 200rpx;
-  height: 200rpx;
-  border: 1px dashed #e5e5e5;
-  border-radius: 8rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f9f9f9;
-
-  .upload-btn-inner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .upload-tips {
-    font-size: 24rpx;
-    color: #999;
-    margin-top: 10rpx;
-  }
-}
-
-// 适配Album组件样式
-:deep(.u-album__item) {
-  border-radius: 8rpx !important;
-  overflow: hidden;
-}
 
-:deep(.u-album__delete) {
-  background-color: rgba(0, 0, 0, 0.5) !important;
-  border-radius: 50% !important;
-  width: 40rpx !important;
-  height: 40rpx !important;
-  top: 0 !important;
-  right: 0 !important;
-}
 </style>
\ No newline at end of file
diff --git a/pages-sub/daily/maintain-manage/add-record.vue b/pages-sub/daily/maintain-manage/add-record.vue
index 0026e6f..9f26fac 100644
--- a/pages-sub/daily/maintain-manage/add-record.vue
+++ b/pages-sub/daily/maintain-manage/add-record.vue
@@ -1,66 +1,122 @@
 <template>
-  <view class="page-container">
-    <view class="inspect-form-content commonPageLRpadding">
+  <view class="u-page">
+    <view class="work-order-form-content commonPageLRpadding">
       <up-form
           label-position="left"
-          :model="inspectForm"
-          ref="inspectFormRef"
-          labelWidth="140rpx"
+          :model="workOrderForm"
+          ref="workOrderFormRef"
+          labelWidth="160rpx"
       >
-        <!-- 1. 巡查描述（文本域） -->
+        <!-- 1. 工单位置（地图选择） -->
         <up-form-item
-            prop="content"
-            class="form-item"
+            label="工单位置"
+            prop="workLocation"
+            border-bottom
+            required
+            @click="chooseWorkLocation(); hideKeyboard()"
         >
-          <up-textarea
-              v-model="inspectForm.remark"
-              placeholder="请输入巡查描述"
-              maxlength="200"
-              count
-          ></up-textarea>
+          <up-input
+              v-model="workOrderForm.workLocation"
+              border="none"
+              readonly
+              suffix-icon="map-fill"
+              placeholder="点击选择工单位置"
+          ></up-input>
         </up-form-item>
 
-        <!-- 2. 上传图片 -->
+        <!-- 2. 道路名称（下拉框） -->
         <up-form-item
-            label="上传图片"
-            prop="images"
+            label="道路名称"
+            prop="roadName"
+            border-bottom
             required
+            @click="workOrderForm.workLocation ? (showRoadName = true, hideKeyboard()) : uni.showToast({title: '请先选择工单位置', icon: 'none'})"
+        >
+          <up-input
+              v-model="workOrderForm.roadName"
+              disabled
+              disabled-color="#ffffff"
+              placeholder="请先选择工单位置"
+              border="none"
+              :placeholder-style="workOrderForm.workLocation ? '' : 'color:#999;'"
+          ></up-input>
+          <template #right>
+            <up-icon name="arrow-right" size="16" :color="workOrderForm.workLocation ? '#333' : '#999'"></up-icon>
+          </template>
+        </up-form-item>
+
+        <!-- 3. 工单名称（下拉框） -->
+        <up-form-item
+            label="工单名称"
+            prop="orderName"
             border-bottom
-            class="form-item"
+            required
+            @click="showOrderName = true; hideKeyboard()"
+        >
+          <up-input
+              v-model="workOrderForm.orderName"
+              disabled
+              disabled-color="#ffffff"
+              placeholder="请选择工单名称"
+              border="none"
+          ></up-input>
+          <template #right>
+            <up-icon name="arrow-right" size="16"></up-icon>
+          </template>
+        </up-form-item>
+
+        <!-- 4. 情况描述（文本域） -->
+        <up-form-item
+            label="情况描述"
+            prop="problemDesc"
+            required
         >
+          <up-textarea
+              placeholder="请输入情况描述（最多200字）"
+              v-model="workOrderForm.problemDesc"
+              count
+              maxlength="200"
+              rows="4"
+              @blur="() => workOrderFormRef.value?.validateField('problemDesc')"
+          ></up-textarea>
+        </up-form-item>
+
+        <!-- 问题照片（复用公共上传） -->
+        <up-form-item label="问题照片" prop="problemImgs" required>
           <up-upload
-              :file-list="imagesList"
-              @after-read="(event) => uploadImgs(event)"
-              @delete="(event) => deleteImg(event)"
-              @on-exceed="handleExceed"
+              :file-list="problemImgs.imgList"
+              @after-read="problemImgs.uploadImgs"
+              @delete="problemImgs.deleteImg"
               multiple
-              :max-count="3"
-              upload-text="选择图片"
-              del-color="#ff4d4f"
-              class="upload-wrap"
+              :max-count="problemImgs.uploadConfig.maxCount"
+              :upload-text="problemImgs.uploadConfig.uploadText"
+              :sizeType="problemImgs.uploadConfig.sizeType"
           ></up-upload>
         </up-form-item>
 
-        <!-- 3. 完成进度（滑块） -->
-        <up-form-item
-            label="完成进度"
-            prop="progress"
+        <!-- 完成照片（复用公共上传） -->
+        <up-form-item label="完成照片" prop="completeImgs" required class="mt-20">
+          <up-upload
+              :file-list="completeImgs.imgList"
+              @after-read="completeImgs.uploadImgs"
+              @delete="completeImgs.deleteImg"
+              multiple
+              :max-count="completeImgs.uploadConfig.maxCount"
+              :upload-text="completeImgs.uploadConfig.uploadText"
+              :sizeType="completeImgs.uploadConfig.sizeType"
+          ></up-upload>
+        </up-form-item>
 
-            class="form-item"
-        >
-          <view class="progress-wrap">
-            <up-slider
-                v-model="inspectForm.progress"
-                :min="initProgress"
-                :max="100"
-                active-color="#1989fa"
-                inactive-color="#e5e5e5"
-                block-size="24"
-                :showValue="true"
-                class="progress-slider"
-                @changing="handleProgressChange"
-            ></up-slider>
-          </view>
+        <!-- 处理结果（不必填） -->
+        <up-form-item label="处理结果" prop="handleResult" class="mt-20">
+          <up-textarea
+              placeholder="请输入处理结果描述（最多200字，选填）"
+              v-model="workOrderForm.handleResult"
+              count
+              maxlength="200"
+              rows="4"
+              @blur="() => workOrderFormRef.value?.validateField('handleResult')"
+          ></up-textarea>
         </up-form-item>
       </up-form>
     </view>
@@ -69,269 +125,271 @@
     <view class="fixed-bottom-btn-wrap">
       <up-button
           type="primary"
-          text="提交"
-          @click="submitInspect"
-          :style="{ width: '100%', height: '88rpx', fontSize: '32rpx', borderRadius: 0 }"
+          text="提交工单"
+          @click="submitWorkOrder"
       ></up-button>
     </view>
+
+    <!-- 道路名称下拉弹窗 -->
+    <up-action-sheet
+        :show="showRoadName"
+        :actions="roadNameList"
+        title="请选择道路名称"
+        @close="showRoadName = false"
+        @select="handleRoadNameSelect"
+    ></up-action-sheet>
+
+    <!-- 工单名称下拉弹窗 -->
+    <up-action-sheet
+        :show="showOrderName"
+        :actions="orderNameList"
+        title="请选择工单名称"
+        @close="showOrderName = false"
+        @select="handleOrderNameSelect"
+    ></up-action-sheet>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
+import { onReady, onShow } from '@dcloudio/uni-app' // 从uni-app导入小程序生命周期
 import type { UniFormRef } from '@/uni_modules/uview-plus/types'
-const inspectFormRef = ref<UniFormRef>(null)
-</script>
+import { useUploadImgs } from '@/common/utils/useUploadImgs' // 引入公共上传逻辑
+import { getRoadListByLatLng } from '@/api/common'
+import { createQuick } from '@/api/quick-order/quick-order'
 
-<script lang="ts">
-import { uploadImages } from '@/common/utils/upload'
-import { maintainCreate } from "@/api/maintain-manage/maintain-manage"
-
-export default {
-  data() {
-    return {
-      imagesList: [],
-      initProgress: 0,
-      inspectForm: {
-        remark: '',
-        progress: 0
-      },
-      paramsOptins: {},
-      inspectFormRules: {
-        images: [
-          {
-            required: true,
-            message: '请上传图片',
-            trigger: 'change',
-            validator: (rule, value, callback) => {
-              const hasSuccessImg = this.imagesList.some(item => item.status === 'success')
-              const imgCount = this.imagesList.filter(item => item.status === 'success').length
-              if (!hasSuccessImg || imgCount < 1) {
-                callback(new Error('最少需要上传1张图片'))
-              } else if (imgCount > 3) {
-                callback(new Error('最多只能上传3张图片'))
-              } else {
-                callback()
-              }
-            }
-          }
-        ],
-        // progress: [
-        //   {
-        //
-        //     required: true,
-        //     message: '请设置完成进度',
-        //     trigger: ['change'],
-        //     validator: (rule, value, callback) => {
-        //       // 第一步：校验是否为空/0
-        //       if (!value && value !== 0) {
-        //         callback(new Error('请设置完成进度'))
-        //       }
-        //       // 第二步：校验是否大于初始进度
-        //       else if (value <= this.initProgress) {
-        //         callback(new Error(`完成进度必须大于${this.initProgress}%`))
-        //       }
-        //       // 校验通过
-        //       else {
-        //         callback()
-        //       }
-        //     }
-        //   }
-        // ]
-      }
-    }
-  },
-  onLoad(option) {
-    console.log('页面参数：', option)
-    this.paramsOptins = option
-    // 初始化初始进度
-    this.initProgress = option.finishPercent ? Number(option.finishPercent)+1 : 0
-    // 关键修复：初始进度值设为 初始进度+1，避免刚进入就触发校验失败
-    this.inspectForm.progress = this.initProgress
-    console.log('初始进度值：', this.initProgress)
-  },
-  onReady() {
-    this.$refs.inspectFormRef.setRules(this.inspectFormRules)
-    console.log('巡查表单规则初始化完成')
-  },
-  methods: {
-    /**
-     * 进度滑块变化处理 - 核心优化：实时触发校验 + 状态更新
-     */
-    handleProgressChange(value) {
-      // // 1. 强制修正非法值（兜底）
-      // console.log(value)
-      // if (value <= this.initProgress) {
-      //   console.log('123')
-      //   this.inspectForm.progress = this.initProgress + 1
-      //   uni.showToast({
-      //     title: `进度不能低于${this.initProgress}%`,
-      //     icon: 'none',
-      //     duration: 1500
-      //   })
-      // }
-      //
-      // // 2. 关键：手动触发progress字段的校验，实时更新提示状态
-      // this.$nextTick(async () => {
-      //   try {
-      //     // 触发单个字段校验
-      //     await this.$refs.inspectFormRef.validateField('progress')
-      //   } catch (err) {
-      //     // 校验失败时uView会自动显示提示，此处无需额外处理
-      //     console.log('进度校验失败：', err)
-      //   }
-      // })
-    },
+// 表单Ref
+const workOrderFormRef = ref<UniFormRef>(null)
 
-    /**
-     * 删除图片
-     */
-    deleteImg(event) {
-      console.log('删除图片事件：', event)
-      this.imagesList.splice(event.index, 1)
-      this.$refs.inspectFormRef.validateField('images')
-      uni.showToast({ title: '图片删除成功', icon: 'success' })
-    },
+// ========== 复用公共上传逻辑 ==========
+// 1. 问题照片配置
+const problemImgs = useUploadImgs({
+  maxCount: 3, // 可自定义数量
+  uploadText: '选择问题照片',
+  sizeType: ['compressed'],
+  formRef: workOrderFormRef,
+  fieldName: 'problemImgs'
+})
+
+// 2. 完成照片配置
+const completeImgs = useUploadImgs({
+  maxCount: 3,
+  uploadText: '选择完成照片',
+  sizeType: ['compressed'],
+  formRef: workOrderFormRef,
+  fieldName: 'completeImgs'
+})
+
+// ========== 页面数据 ==========
+const showRoadName = ref(false)
+const showOrderName = ref(false)
+const roadNameList = ref<any[]>([])
+const orderNameList = ref<any[]>([])
+
+// 工单表单数据
+const workOrderForm = reactive({
+  roadId: 0,
+  roadName: '',
+  workLocation: '',
+  orderName: '',
+  problemDesc: '',
+  handleResult: '',
+  lat: 0,
+  lon: 0
+})
+
+// 表单校验规则
+const workOrderFormRules = reactive({
+  workLocation: [
+    { type: 'string', required: true, message: '请选择工单位置', trigger: ['change', 'blur'] }
+  ],
+  roadName: [
+    { type: 'string', required: true, message: '请选择道路名称', trigger: ['change', 'blur'] }
+  ],
+  orderName: [
+    { type: 'string', required: true, message: '请选择工单名称', trigger: ['change', 'blur'] }
+  ],
+  problemDesc: [
+    { type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur'] },
+    { type: 'string', min: 3, max: 200, message: '情况描述需3-200字', trigger: ['change', 'blur'] }
+  ],
+  problemImgs: [problemImgs.imgValidateRule], // 复用校验规则
+  completeImgs: [completeImgs.imgValidateRule] // 复用校验规则
+})
+
+// ========== 生命周期 ==========
+onReady(() => {
+  // 设置表单校验规则
+  workOrderFormRef.value?.setRules(workOrderFormRules)
+  console.log('工单表单规则初始化完成')
+})
+
+onShow(() => {
+  console.log(uni.$dict.getDictLabel('ai_image_status', 20))
+  console.log(uni.$dict.getDictSimpleList('work_name'))
+  orderNameList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('work_name'))
+  console.log(orderNameList.value)
+})
+
+// ========== 方法 ==========
+/**
+ * 返回上一页
+ */
+const navigateBack = () => {
+  uni.navigateBack()
+}
+
+/**
+ * 隐藏键盘
+ */
+const hideKeyboard = () => {
+  uni.hideKeyboard()
+}
+
+/**
+ * 选择工单位置
+ */
+const chooseWorkLocation = async () => {
+  uni.chooseLocation({
+    success: async (res) => {
+      workOrderForm.roadName = ''
+      workOrderForm.roadId = 0
+      roadNameList.value = []
+
+      workOrderForm.workLocation = res.name
+      workOrderForm.lat = res.latitude
+      workOrderForm.lon = res.longitude
 
-    /**
-     * 上传图片
-     */
-    async uploadImgs(event) {
-      console.log('上传图片事件：', event)
-      const fileList = Array.isArray(event.file) ? event.file : [event.file]
-      const targetImgList = this.imagesList
-      const filePaths = fileList.map(item => item.url)
-      const tempItems = fileList.map(item => ({
-        ...item,
-        status: 'uploading',
-        message: '上传中'
-      }))
-      const startIndex = targetImgList.length
-      targetImgList.push(...tempItems)
+      workOrderFormRef.value?.validateField('workLocation')
+      workOrderFormRef.value?.validateField('roadName')
 
       try {
-        const uploadResultUrls = await uploadImages({
-          filePaths: filePaths,
-          ignoreError: true
-        })
-        console.log('上传成功的URL列表：', uploadResultUrls)
-
-        uploadResultUrls.forEach((url, index) => {
-          if (targetImgList[startIndex + index]) {
-            targetImgList.splice(startIndex + index, 1, {
-              ...fileList[index],
-              status: 'success',
-              message: '',
-              url: url
-            })
-          }
+        uni.showLoading({ title: '获取道路名称中...' })
+        const roadRes = await getRoadListByLatLng({
+          companyCode: 'sls',
+          latitude: res.latitude,
+          longitude: res.longitude
         })
+        uni.hideLoading()
 
-        if (uploadResultUrls.length < fileList.length) {
-          const failCount = fileList.length - uploadResultUrls.length
-          for (let i = uploadResultUrls.length; i < fileList.length; i++) {
-            if (targetImgList[startIndex + i]) {
-              targetImgList.splice(startIndex + i, 1, {
-                ...fileList[i],
-                status: 'failed',
-                message: '上传失败'
-              })
-            }
-          }
-          uni.showToast({ title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none' })
+        if (Array.isArray(roadRes)) {
+          roadNameList.value = roadRes.map((item) => ({
+            name: item.roadName || '',
+            code: item.roadCode || '',
+            id: item.roadId || 0
+          }))
         } else {
-          uni.showToast({ title: `成功上传${fileList.length}张图片`, icon: 'success' })
+          roadNameList.value = [{ name: '未查询到道路名称', code: '', id: 0 }]
+          uni.showToast({ title: '未查询到该位置的道路信息', icon: 'none' })
         }
-
-        this.$refs.inspectFormRef.validateField('images')
       } catch (err) {
-        console.error('图片上传失败：', err)
-        for (let i = 0; i < fileList.length; i++) {
-          if (targetImgList[startIndex + i]) {
-            targetImgList.splice(startIndex + i, 1, {
-              ...fileList[i],
-              status: 'failed',
-              message: '上传失败'
-            })
-          }
-        }
-        uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
-        this.$refs.inspectFormRef.validateField('images')
+        uni.hideLoading()
+        console.error('获取道路名称失败：', err)
+        uni.showToast({ title: '获取道路名称失败，请重试', icon: 'none' })
+        roadNameList.value = [{ name: '获取失败，请重新选择位置', code: '', id: 0 }]
       }
     },
+    fail: (err) => {
+      console.error('选择位置失败：', err)
+      uni.showToast({ title: '选择位置失败：' + err.errMsg, icon: 'none' })
+    }
+  })
+}
 
-    /**
-     * 处理图片超出数量限制
-     */
-    handleExceed() {
-      uni.showToast({ title: '最多只能上传3张图片', icon: 'none' })
-    },
+/**
+ * 选择道路名称
+ */
+const handleRoadNameSelect = (e: any) => {
+  console.log('选择道路名称：', e)
+  workOrderForm.roadName = e.name
+  workOrderForm.roadId = e.code
+  showRoadName.value = false
+  workOrderFormRef.value?.validateField('roadName')
+}
 
-    /**
-     * 提取图片URL数组
-     */
-    getImgUrlList(imgList) {
-      return imgList.filter(item => item.status === 'success').map(item => item.url)
-    },
+/**
+ * 选择工单名称
+ */
+const handleOrderNameSelect = (e: any) => {
+  console.log(e)
+  workOrderForm.orderName = e.name
+  showOrderName.value = false
+  workOrderFormRef.value?.validateField('orderName')
+}
 
-    /**
-     * 提交巡查表单
-     */
-    async submitInspect() {
-      console.log('当前完成进度：', this.inspectForm.progress)
-      try {
-        await this.$refs.inspectFormRef.validate()
-        console.log('图片列表：', this.imagesList)
-
-        const submitData = {
-          totalFinishPercent: this.inspectForm.progress,
-          "planNo": this.paramsOptins.planNo,
-          "imgHost": "1",
-          "beginImg": this.getImgUrlList(this.imagesList),
-          "commonUserList": [],
-          "remark": this.inspectForm.remark
-        }
+/**
+ * 提交工单
+ */
+const submitWorkOrder = async () => {
+  try {
+    // 表单校验
+    await workOrderFormRef.value?.validate()
 
-        uni.showLoading({ title: '提交中...' })
-        await maintainCreate(submitData)
-        uni.hideLoading()
+    const submitData = {
+      roadId: workOrderForm.roadId,
+      roadName: workOrderForm.roadName,
+      imgs: problemImgs.getSuccessImgUrls(), // 复用获取成功URL方法
+      longRangeImgList: completeImgs.getSuccessImgUrls(), // 复用获取成功URL方法
+      remark: workOrderForm.problemDesc,
+      handleResult: workOrderForm.handleResult,
+      latLonType: 2,
+      lat: workOrderForm.lat,
+      lon: workOrderForm.lon,
+      lonLatAddress: workOrderForm.workLocation,
+      pressingType: 2,
+      orderName: workOrderForm.orderName,
+      sourceId: 1,
+      sourceName: '园林',
+      thirdWorkNo: ''
+    }
 
-        uni.showToast({
-          title: '提交成功',
-          icon: 'success',
-          duration: 1000
-        })
+    // 显示加载中
+    uni.showLoading({ title: '提交中...' })
 
-        setTimeout(() => {
-          uni.redirectTo({
-            url: '/pages-sub/daily/maintain-manage/index'
-          })
-        }, 1000)
+    // 调用提交接口
+    const res = await createQuick(submitData)
 
-      } catch (error) {
-        uni.hideLoading()
-        if (!Array.isArray(error)) {
-          console.error('巡查表单提交失败：', error)
-          uni.showToast({
-            title: '提交失败，请重试',
-            icon: 'none',
-            duration: 2000
-          })
-        }
-      }
+    uni.hideLoading()
+    uni.showToast({
+      title: '工单提交成功',
+      icon: 'success',
+      duration: 1000
+    })
+
+    // 延迟跳转
+    setTimeout(() => {
+      uni.redirectTo({
+        url: '/pages-sub/daily/quick-order/index'
+      })
+    }, 1000)
+  } catch (error) {
+    uni.hideLoading()
+
+    if (!Array.isArray(error)) {
+      console.error('工单提交失败：', error)
+      uni.showToast({
+        title: '提交失败，请重试',
+        icon: 'none',
+        duration: 2000
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.inspect-form-content {
+// 全局页面样式
+.u-page {
+  min-height: 100vh;
+}
+
+// 工单表单内容容器
+.work-order-form-content {
   background: #fff;
-  padding: 20rpx;
-  margin-bottom: 20rpx;
 }
 
-.progress-wrap {
-  width: 83%;
+.fixed-bottom-btn-wrap {
+  padding: 20rpx;
+  background: #fff;
 }
 </style>
\ No newline at end of file
diff --git a/pages-sub/daily/quick-order/add-order.vue b/pages-sub/daily/quick-order/add-order.vue
index fd822b7..82ba3cc 100644
--- a/pages-sub/daily/quick-order/add-order.vue
+++ b/pages-sub/daily/quick-order/add-order.vue
@@ -151,18 +151,11 @@
 </template>
 
 <script setup lang="ts">
-import {ref, inject} from 'vue'
+import {ref} from 'vue'
 
 import type {UniFormRef} from '@/uni_modules/uview-plus/types'
 // 定义ref供选项式API使用
 const workOrderFormRef = ref<UniFormRef>(null)
-//
-// // 注入全局字典工具
-// const $dict = inject('$dict');
-// const dictLabel = ref('');
-// const modeList = ref([]);
-//
-
 
 </script>
 
@@ -170,11 +163,7 @@ const workOrderFormRef = ref<UniFormRef>(null)
 import {getRoadListByLatLng} from '@/api/common'
 import {uploadImages} from '@/common/utils/upload';
 import {createQuick} from '@/api/quick-order/quick-order'
-// import { getCurrentInstance } from 'vue';
-// const { proxy } = getCurrentInstance();
-// const label = $dict.getDictLabel('ai_image_status', 10);
-// const opdata = $dict.getDictLabel('ai_image_status');
-// console.log(opdata)
+
 
 export default {
   data() {
@@ -468,7 +457,8 @@ export default {
           orderName: this.workOrderForm.orderName,
           sourceId: 1,
           sourceName: '园林',
-          thirdWorkNo: ''
+          thirdWorkNo: '',
+          busiLine:'yl'
         }
 
         // 显示加载中
diff --git a/pages-sub/problem/work-order-manage/index.vue b/pages-sub/problem/work-order-manage/index.vue
new file mode 100644
index 0000000..435ddcb
--- /dev/null
+++ b/pages-sub/problem/work-order-manage/index.vue
@@ -0,0 +1,547 @@
+<template>
+  <view class="page-container">
+    <!-- 顶部固定区域 -->
+    <up-sticky>
+      <view class="header-wrap">
+        <!-- 第一行：u-tabs 待办/已办切换  :scrollable="false"-->
+        <up-tabs
+            v-model="activeTab"
+            :list="tabList"
+            active-color="#1989fa"
+            inactive-color="#666"
+            font-size="30rpx"
+
+            @change="handleTabChange"
+        />
+
+        <!-- 第二行：下拉框 + 搜索框 -->
+        <view class="search-header">
+          <!-- 左侧下拉框 -->
+          <view class="select-wrap">
+            <up-select
+                v-model:current="selectedSortValue"
+                :options="sortOptions"
+                :showOptionsLabel="true"
+                @select="handleSortChange"
+                border="surround"
+                :style="{ flex: 1 }"
+            />
+          </view>
+
+          <!-- 右侧搜索框 -->
+          <view class="search-input-wrap">
+            <up-search
+                v-model="searchValue"
+                placeholder="请输入关键字"
+                @search="handleSearch"
+                bg-color="#f5f5f5"
+                :clearabled="false"
+                :show-action="true"
+                actionText="搜索"
+                :animation="true"
+                @custom="handleSearch"
+            />
+          </view>
+        </view>
+      </view>
+    </up-sticky>
+
+    <!-- 列表容器 -->
+    <z-paging
+        ref="paging"
+        v-model="orderList"
+        @query="queryList"
+        :auto-show-system-loading="true"
+
+    >
+    <template #empty>
+      <view class="empty-view" style="padding: 100rpx 0; text-align: center; color: #999;">
+        暂无工单数据
+      </view>
+    </template>
+
+    <view class="common-card-list" slot="top">
+      <!-- 待办工单卡片 -->
+      <up-card
+          v-if="activeTab === 0"
+          :border="false"
+          :foot-border-top="false"
+          v-for="(item, index) in orderList"
+          :key="`todo_${item.orderNo}_${index}`"
+          :show-head="false"
+          class="order-card"
+      >
+        <template #body>
+          <view class="card-body">
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">工单编号：</view>
+              <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</view>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">工单位置：</view>
+              <view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</view>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">工单名称：</view>
+              <view class="u-line-1 u-body-value">{{ item.orderName || '未填写' }}</view>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">情况描述：</view>
+              <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">紧急程度：</view>
+              <view class="u-line-1 u-body-value">
+                <up-tag :type="getUrgencyType(item.urgencyLevel)">{{ item.urgencyLevel || '普通' }}</up-tag>
+              </view>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">提交时间：</view>
+              <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
+            </view>
+            <!-- 操作按钮行 -->
+            <view class="u-body-item u-flex common-justify-between common-item-center mt-20">
+              <up-button type="warning" size="mini" @click="handleReject(item)">回退</up-button>
+              <up-button type="primary" size="mini" @click="handleProcess(item)">处理</up-button>
+              <up-button type="info" size="mini" @click="handleDetail(item)">详情</up-button>
+            </view>
+          </view>
+        </template>
+      </up-card>
+
+      <!-- 已办工单卡片 -->
+      <up-card
+          v-if="activeTab === 1"
+          :border="false"
+          :foot-border-top="false"
+          v-for="(item, index) in orderList"
+          :key="`done_${item.orderNo}_${index}`"
+          :show-head="false"
+          class="order-card"
+      >
+        <template #body>
+          <view class="card-body">
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">工单编号：</view>
+              <view class="u-line-1 u-body-value">{{ item.orderNo || '-' }}</view>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">工单位置：</view>
+              <view class="u-line-1 u-body-value">{{ item.roadName || '-' }}</view>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">工单名称：</view>
+              <view class="u-line-1 u-body-value">{{ item.orderName || '未填写' }}</view>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">情况描述：</view>
+              <view class="u-line-1 u-body-value">{{ item.remark || '无' }}</view>
+            </view>
+            <view class="u-body-item u-flex common-justify-between common-item-center">
+              <view class="u-flex">
+                <view class="u-body-item-title">紧急程度：</view>
+                <view class="u-line-1 u-body-value">
+                  <up-tag :type="getUrgencyType(item.urgencyLevel)">{{ item.urgencyLevel || '普通' }}</up-tag>
+                </view>
+              </view>
+              <up-button type="info" size="mini" @click="handleDetail(item)">工单详情</up-button>
+            </view>
+            <view class="u-body-item u-flex">
+              <view class="u-body-item-title">提交时间：</view>
+              <view class="u-line-1 u-body-value">{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
+            </view>
+          </view>
+        </template>
+      </up-card>
+    </view>
+    </z-paging>
+
+    <!-- 底部新增工单按钮（仅巡查员显示） -->
+    <view v-if="isInspector" class="fixed-bottom-btn-wrap">
+      <up-button type="primary" size="large" @click="handleAddOrder">
+        新增工单
+      </up-button>
+    </view>
+
+    <!-- 回退原因弹窗 -->
+    <up-popup v-model="rejectPopupShow" mode="center" :close-on-click-overlay="false">
+      <view class="reject-popup">
+        <view class="popup-title">回退原因</view>
+        <up-textarea
+            v-model="rejectReason"
+            placeholder="请输入回退原因（必填）"
+            :required="true"
+            maxlength="-1"
+            rows="4"
+            class="mt-20"
+        />
+        <view class="upload-wrap mt-20">
+          <view class="upload-title">上传图片（选填）</view>
+          <up-upload
+              :action="uploadUrl"
+              :file-list="rejectFileList"
+              @after-read="handleAfterRead"
+              @delete="handleDeleteFile"
+              multiple
+              max-count="3"
+          />
+        </view>
+        <view class="popup-btn-wrap mt-40">
+          <up-button type="default" size="medium" @click="rejectPopupShow = false" class="mr-20">取消</up-button>
+          <up-button type="primary" size="medium" @click="confirmReject">确认提交</up-button>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { timeFormat } from '@/uni_modules/uview-plus';
+// 假设从用户store获取角色信息
+import { useUserStore } from '@/pinia/user';
+
+// ========== 状态管理 ==========
+const userStore = useUserStore();
+// 标签页切换
+const activeTab = ref(0); // 0-待办 1-已办
+const tabList = ref([
+  { name: '待办' },
+  { name: '已办' }
+]);
+// 排序下拉框
+const selectedSortValue = ref(1);
+const sortOptions = ref([
+  { name: '位置', id: 1 },
+  { name: '名称', id: 2 },
+  { name: '描述', id: 3 },
+  { name: '编号', id: 4 },
+]);
+// 搜索
+const searchValue = ref('');
+// 分页
+const paging = ref(null);
+const orderList = ref([]);
+// 角色控制（巡查员显示新增按钮）
+const isInspector = computed(() => {
+  // 假设用户角色字段为role，巡查员标识为inspector
+  return userStore.userInfo.roles === 'yl_inspector';
+});
+// 回退弹窗相关
+const rejectPopupShow = ref(false);
+const rejectReason = ref('');
+const rejectFileList = ref([]);
+const currentRejectItem = ref(null);
+// 上传地址（根据实际接口配置）
+const uploadUrl = ref('https://xxx.com/upload');
+
+// ========== 接口请求 ==========
+// 待办工单接口
+const getTodoOrderList = async (params) => {
+  // 替换为实际待办工单接口
+  const res = await uni.request({
+    url: '/api/order/todo',
+    method: 'POST',
+    data: params
+  });
+  return res.data;
+};
+
+// 已办工单接口
+const getDoneOrderList = async (params) => {
+  // 替换为实际已办工单接口
+  const res = await uni.request({
+    url: '/api/order/done',
+    method: 'POST',
+    data: params
+  });
+  return res.data;
+};
+
+// 分页查询列表
+const queryList = async (pageNo, pageSize) => {
+  try {
+    const apiParams = {
+      searchContent: searchValue.value.trim() || '',
+      pageNo,
+      pageSize,
+      type: selectedSortValue.value // 1-位置 2-工单名称 3-情况描述 4-工单编号
+    };
+
+    let res;
+    if (activeTab.value === 0) {
+      // 待办工单
+      res = await getTodoOrderList(apiParams);
+    } else {
+      // 已办工单
+      res = await getDoneOrderList(apiParams);
+    }
+
+    // 适配z-paging分页
+    paging.value.complete(res.list, res.total);
+  } catch (error) {
+    console.error('加载工单失败：', error);
+    paging.value?.complete(false);
+    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
+  }
+};
+
+// ========== 事件处理 ==========
+// 标签页切换
+const handleTabChange = (index) => {
+  activeTab.value = index;
+  paging.value?.reload(); // 切换标签页刷新列表
+};
+
+// 排序变更
+const handleSortChange = (val) => {
+  selectedSortValue.value = val.id;
+  searchValue.value = '';
+  paging.value?.reload(); // 排序变更刷新列表
+};
+
+// 搜索
+const handleSearch = (val) => {
+  searchValue.value = val;
+  paging.value?.reload(); // 搜索刷新列表
+};
+
+// 工单详情
+const handleDetail = (item) => {
+  uni.navigateTo({
+    url: `/pages-sub/daily/quick-order/order-detail?id=${item.id}`
+  });
+};
+
+// 待办-处理工单
+const handleProcess = async (item) => {
+  try {
+    // 调用处理工单接口，获取跳转标识
+    const res = await uni.request({
+      url: '/api/order/process',
+      method: 'POST',
+      data: { orderId: item.id }
+    });
+
+    const { jumpType, jumpUrl } = res.data;
+    // 根据返回标识跳转不同页面
+    if (jumpType === 1) {
+      uni.navigateTo({ url: jumpUrl });
+    } else if (jumpType === 2) {
+      uni.redirectTo({ url: jumpUrl });
+    } else if (jumpType === 3) {
+      uni.switchTab({ url: jumpUrl });
+    }
+  } catch (error) {
+    console.error('处理工单失败：', error);
+    uni.showToast({ title: '处理失败，请重试', icon: 'none' });
+  }
+};
+
+// 待办-回退工单
+const handleReject = (item) => {
+  currentRejectItem.value = item;
+  rejectReason.value = '';
+  rejectFileList.value = [];
+  rejectPopupShow.value = true;
+};
+
+// 确认回退工单
+const confirmReject = async () => {
+  if (!rejectReason.value.trim()) {
+    uni.showToast({ title: '请填写回退原因', icon: 'none' });
+    return;
+  }
+
+  try {
+    // 调用回退工单接口
+    await uni.request({
+      url: '/api/order/reject',
+      method: 'POST',
+      data: {
+        orderId: currentRejectItem.value.id,
+        reason: rejectReason.value,
+        fileUrls: rejectFileList.value.map(file => file.url)
+      }
+    });
+
+    uni.showToast({ title: '回退成功', icon: 'success' });
+    rejectPopupShow.value = false;
+    paging.value?.reload(); // 刷新列表
+  } catch (error) {
+    console.error('回退工单失败：', error);
+    uni.showToast({ title: '回退失败，请重试', icon: 'none' });
+  }
+};
+
+// 新增工单
+const handleAddOrder = () => {
+  uni.navigateTo({
+    url: '/pages-sub/daily/quick-order/add-order'
+  });
+};
+
+// 紧急程度标签类型转换
+const getUrgencyType = (level) => {
+  switch (level) {
+    case '紧急':
+      return 'danger';
+    case '重要':
+      return 'warning';
+    case '普通':
+      return 'info';
+    default:
+      return 'default';
+  }
+};
+
+// 上传图片-读取后
+const handleAfterRead = (file) => {
+  rejectFileList.value.push(file);
+};
+
+// 上传图片-删除
+const handleDeleteFile = (index) => {
+  rejectFileList.value.splice(index, 1);
+};
+
+// 页面初始化
+onMounted(() => {
+  // 初始化加载列表
+  paging.value?.reload();
+});
+</script>
+
+<style scoped lang="scss">
+.page-container {
+  min-height: 100vh;
+  background-color: #f8f8f8;
+}
+
+// 顶部固定区域
+.header-wrap {
+  background-color: #fff;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+// 搜索栏样式
+.search-header {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  box-sizing: border-box;
+
+  .select-wrap {
+    width: 120rpx;
+    margin-right: 20rpx;
+
+    :deep(.u-select) {
+      width: 100%;
+      font-size: 28rpx;
+    }
+
+    :deep(.u-input__placeholder) {
+      font-size: 28rpx;
+    }
+  }
+
+  .search-input-wrap {
+    flex: 1;
+  }
+}
+
+// 工单卡片样式
+.common-card-list {
+  padding: 20rpx;
+}
+
+.order-card {
+  margin-bottom: 20rpx;
+  background-color: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+}
+
+.card-body {
+  padding: 20rpx;
+
+  .u-body-item {
+    margin-bottom: 16rpx;
+    font-size: 28rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .u-body-item-title {
+      color: #666;
+      min-width: 120rpx;
+    }
+
+    .u-body-value {
+      color: #333;
+      flex: 1;
+    }
+  }
+
+  .mt-20 {
+    margin-top: 20rpx;
+  }
+}
+
+// 公共flex样式
+.u-flex {
+  display: flex;
+  align-items: center;
+}
+
+.common-justify-between {
+  justify-content: space-between;
+}
+
+.common-item-center {
+  align-items: center;
+}
+
+// 底部按钮
+.fixed-bottom-btn-wrap {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20rpx;
+  background-color: #fff;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+  :deep(.u-button) {
+    width: 100%;
+    height: 88rpx;
+    font-size: 32rpx;
+  }
+}
+
+// 回退弹窗样式
+.reject-popup {
+  width: 680rpx;
+  padding: 30rpx;
+  background-color: #fff;
+  border-radius: 12rpx;
+
+  .popup-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .upload-title {
+    font-size: 28rpx;
+    color: #666;
+    margin-bottom: 10rpx;
+  }
+
+  .popup-btn-wrap {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index d92a32c..51125b4 100644
--- a/pages.json
+++ b/pages.json
@@ -119,8 +119,9 @@
 		{
 			"root": "pages-sub/problem",
 			"pages": [
+
 				{
-					"path": "order-manage/index",
+					"path": "work-order-manage/index",
 					"style": { "navigationBarTitleText": "工单管理" }
 				},
 				{
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 470d30a..e4b5616 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -308,30 +308,4 @@ const handleLogin = async () => {
   }
 }
 
-// 登录按钮
-.login-btn {
-  width: 100%;
-  margin-top: 20rpx;
-
-  // 按钮点击反馈
-  &:active {
-    transform: scale(0.98);
-    transition: transform 0.1s ease;
-  }
-}
-
-// 覆盖uview默认样式
-:deep(.up-input) {
-  border-radius: 8rpx !important;
-  height: 80rpx !important;
-  line-height: 80rpx !important;
-}
-
-:deep(.up-input__prefix) {
-  margin-right: 15rpx !important;
-}
-
-:deep(.up-button__loading) {
-  color: #fff !important;
-}
 </style>
\ No newline at end of file
--
libgit2 0.21.4