新增快速工单，原版

刘淇
1 parent 993d98fa
Showing 18 changed files with 1547 additions and 170 deletions
App.vue
api/common.js
api/quick-order/quick-order.js
api/upload.js
api/user.js
common/config/global.js
common/utils/upload.js
components/upload-image/upload-image.vue
main.js
manifest.json
pages-sub/daily/patrol-manage/patrol-plan/index.vue
pages-sub/daily/quick-order/add-order.vue
pages-sub/daily/quick-order/index.vue
pages-sub/daily/quick-order/order-detail.vue
pages-sub/daily/quick-order/order-list.vue
pages.json
pages/workbench/index.vue
pinia/user.js
@@ -61,4 +61,8 @@ page {
   //padding-bottom: env(safe-area-inset-bottom);
   /* #endif */
 }
+.commonPageLRpadding{
+  padding-left: 15px;
+  padding-right: 15px;
+}
 </style>
 \ No newline at end of file
+
+import { post, get } from '@/common/utils/request';
+
+
+/**
+ * 根据经纬度获取道路接口
+ * @param {Object} params {mobile, password, code}
+ * @returns {Promise}
+ */
+export const getRoadListByLatLng = (params) => {
+  return get('/app-api/bpm/garden/workorder/listRoadInfo', params);
+};
+
+// export const fileUpload = (params) => {
+//   return post('/app-api/infra/file/upload', params);
+// };
+ export const fileUpload = '/app-api/infra/file/upload'
+
+
+
+import { post, get } from '@/common/utils/request';
+
+// work_name
+/**
+ * 快速工单  所有工单列表接口
+ * @param {Object} params {mobile, password, code}
+ * @returns {Promise}
+ */
+export const workorderPage = (params) => {
+  return get('/app-api/bpm/garden/workorder/page', params);
+};
+
+
+/**
+ * 快速工单  创建
+ * @returns {Promise}
+ */
+export const createQuick = (data) => {
+  return post('/app-api/bpm/garden/workorder/createQuick',data);
+};
+
+/**
+ * 快速工单  获取详情
+ * @returns {Promise}
+ */
+export const inspectionPlanDetail = (params) => {
+  return get('/app-api/bpm/garden/workorder/get',params);
+};
+
+import globalConfig from '@/common/config/global';
+import cache from '@/common/utils/cache';
+
+const fileUpload = '/app-api/infra/file/upload'
+
+export  const uploadFilePromise = (url) => {
+  return new Promise((resolve, reject) => {
+    let a = uni.uploadFile({
+      url: `${globalConfig.api.baseUrl}${fileUpload}`,
+      filePath: url,
+      name: 'file',
+      formData: {
+        user: 'test',
+      },
+      success: (res) => {
+        setTimeout(() => {
+          resolve(res.data.data);
+        }, 1000);
+      },
+    });
+  });
+};
 \ No newline at end of file
@@ -39,5 +39,5 @@ export const moduleList = () =&gt; {
  * @returns {Promise}
  */
 export const getSimpleDictDataList = () => {
-  return get({ url: '/system/dict-data/simple-list' })
+  return get('/admin-api/system/dict-data/simple-list')
 }
@@ -23,7 +23,7 @@ export default {
     expireTimeKey: 'jcss_token_expire',
     userIdKey:'jcss_user_id',
     moduleListKey:'jcss_module_list',
-
+    dictDataKey:'jcss_dict_data'
   },
   appName: 'JCSS管理系统',
   tokenExpireTime: 7 * 24 * 60 * 60 * 1000
+// @/common/utils/upload.ts
 import globalConfig from '@/common/config/global';
 import cache from '@/common/utils/cache';
+import { useUserStore } from '@/pinia/user';
+import { fileUpload } from '@/api/common';
  
-export const uploadImages = (files, options = {}) => {
-  const opts = { count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], showLoading: true, ...options };
-  const token = cache.get(globalConfig.cache.tokenKey);
+// 统一的多文件上传方法（单/多图都走这个）
+export const uploadImages = async (options) => {
+  const {
+    filePaths,
+    fileKey = 'file',
+    header = {},
+    ignoreError = true // 忽略单张失败，继续上传其他
+  } = options;
  
-  if (!token) {
-    uni.showToast({ title: '请先登录', icon: 'none' });
-    return Promise.reject('未登录');
+  if (!filePaths || filePaths.length === 0) {
+    uni.showToast({title: '请选择要上传的图片', icon: 'none'});
+    return [];
   }
  
-  if (files.length > opts.count) {
-    uni.showToast({ title: `最多上传${opts.count}张`, icon: 'none' });
-    return Promise.reject('超出数量');
-  }
-
-  if (opts.showLoading) uni.showLoading({ title: '上传中...' });
+  const userStore = useUserStore()
+  const defaultHeader = {
+    'Content-Type': 'multipart/form-data',
+    'Authorization': 'Bearer ' + (userStore.token || cache.get(globalConfig.cache.tokenKey) || '')
+  };
+  const finalHeader = {...defaultHeader, ...header};
+  const resultUrls = []; // 最终返回的URL数组
  
-  const uploadPromises = files.map(filePath => {
-    return new Promise((resolve, reject) => {
-      uni.uploadFile({
-        url: globalConfig.api.uploadUrl,
-        filePath,
-        name: 'file',
-        header: { 'Authorization': `Bearer ${token}` },
-        formData: opts.formData || {},
-        success: (res) => {
-          const data = JSON.parse(res.data);
-          if (data.code === 200) resolve(data.data);
-          else {
-            uni.showToast({ title: data.msg || '上传失败', icon: 'none' });
-            reject(data);
+  // 遍历上传（单/多图统一遍历逻辑）
+  for (let i = 0; i < filePaths.length; i++) {
+    try {
+      const url = await new Promise((resolve, reject) => {
+        uni.uploadFile({
+          url: `${globalConfig.api.baseUrl}${fileUpload}`,
+          filePath: filePaths[i],
+          name: fileKey,
+          header: finalHeader,
+          success: (res) => {
+            try {
+              const data = JSON.parse(res.data);
+              if (data.code === 0) {
+                resolve(data.data); // 接口返回的URL在data.data中
+              } else {
+                reject(new Error(data.msg || '上传失败'));
+              }
+            } catch (e) {
+              reject(new Error('解析返回数据失败'));
+            }
+          },
+          fail: (err) => {
+            reject(new Error(err.errMsg || '网络错误'));
           }
-        },
-        fail: (err) => {
-          uni.showToast({ title: '上传失败', icon: 'none' });
-          reject(err);
-        }
+        });
       });
-    });
-  });
-
-  return Promise.all(uploadPromises)
-    .then(results => {
-      if (opts.showLoading) uni.hideLoading();
-      return results;
-    })
-    .catch(err => {
-      if (opts.showLoading) uni.hideLoading();
-      return Promise.reject(err);
-    });
-};
+      resultUrls.push(url); // 成功的URL加入数组
+    } catch (err) {
+      console.error(`第${i+1}张图片上传失败：`, err);
+      if (!ignoreError) break; // 不忽略错误则终止上传
+    }
+  }
  
-export const chooseAndUploadImages = (options = {}) => {
-  const opts = { count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], ...options };
-  return new Promise((resolve, reject) => {
-    uni.chooseImage({
-      count: opts.count,
-      sizeType: opts.sizeType,
-      sourceType: opts.sourceType,
-      success: (res) => {
-        uploadImages(res.tempFilePaths, opts).then(resolve).catch(reject);
-      },
-      fail: reject
-    });
-  });
+  return resultUrls; // 始终返回数组（单图返回长度1，多图返回对应长度，无成功则返回空数组）
 };
 \ No newline at end of file
 <template>
-  <view class="upload-image">
-    <view class="image-list">
-      <view class="image-item" v-for="(item, index) in imageList" :key="index">
-        <image class="image" :src="item.url || item" mode="aspectFill"></image>
-        <view class="delete-btn" @click="deleteImage(index)">
-          <u-icon name="close" color="#fff"></u-icon>
-        </view>
-      </view>
-      <view class="upload-btn" v-if="imageList.length < maxCount" @click="chooseImage">
-        <u-icon name="plus" size="40" color="#999"></u-icon>
-        <view class="upload-text">上传图片</view>
+  <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>
-    </view>
-    <view class="tips" v-if="tips">{{ tips }}</view>
+    </up-upload>
   </view>
 </template>
  
-<script setup>
-import { ref, defineProps, defineEmits, watch } from 'vue';
-import { chooseAndUploadImages } from '@/common/utils/upload';
+<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
+    }
+);
  
-const props = defineProps({
-  maxCount: { type: Number, default: 9 },
-  modelValue: { type: Array, default: () => [] },
-  tips: { type: String, default: '最多上传9张图片' },
-  showTips: { type: Boolean, default: 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 emit = defineEmits(['update:modelValue', 'change']);
-const imageList = ref([...props.modelValue]);
+// 内部维护的图片列表
+const imageList = ref([...props.value]);
  
-watch(() => props.modelValue, (newVal) => imageList.value = [...newVal], { deep: true });
+// 监听父组件传入的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);
  
-const chooseImage = async () => {
   try {
-    const res = await chooseAndUploadImages({ count: props.maxCount - imageList.value.length });
-    imageList.value = [...imageList.value, ...res];
-    emit('update:modelValue', imageList.value);
-    emit('change', imageList.value);
+    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) {
-    console.error('上传失败:', err);
+    emit('upload-error', err);
+    console.error('图片上传失败：', err);
+  } finally {
+    uni.hideLoading();
   }
 };
  
-const deleteImage = (index) => {
+/**
+ * 删除图片
+ */
+const handleDelete = (index: number) => {
   imageList.value.splice(index, 1);
-  emit('update:modelValue', imageList.value);
-  emit('change', imageList.value);
+  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 scoped>
-.upload-image { width: 100%; }
-.image-list { display: flex; flex-wrap: wrap; gap: 10rpx; }
-.image-item { position: relative; width: 200rpx; height: 200rpx; border-radius: 8rpx; overflow: hidden; }
-.image { width: 100%; height: 100%; }
-.delete-btn { position: absolute; top: 0; right: 0; width: 40rpx; height: 40rpx; background: rgba(0,0,0,0.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
-.upload-btn { width: 200rpx; height: 200rpx; border: 1rpx dashed #ddd; border-radius: 8rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f9f9f9; }
-.upload-text { font-size: 24rpx; color: #999; margin-top: 10rpx; }
-.tips { font-size: 24rpx; color: #999; margin-top: 10rpx; }
+<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
@@ -4,6 +4,8 @@ import uviewPlus from &#39;@/uni_modules/uview-plus&#39;
 // 导入 Pinia 实例（你的 stores/index.js 导出的 pinia）
 import pinia from '@/pinia/index'
 import EmptyView from '@/components/empty-view/empty-view.vue';
+import UploadImage from '@/components/upload-image/upload-image.vue';
+
 // #ifdef VUE3
 import { createSSRApp } from 'vue'
  
@@ -17,6 +19,7 @@ export function createApp() {
   // 4. 注册 Pinia（核心：在 app 挂载前注册）
   app.use(pinia)
   app.component('EmptyView', EmptyView)
+  app.component('UploadImage', UploadImage)
   // 5. 返回 app + pinia（可选，便于调试）
   return {
     app,
@@ -55,6 +55,17 @@
             "urlCheck" : false
         },
         "usingComponents" : true,
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "定位"
+            }
+        },
+        "requiredPrivateInfos" : [
+            "getLocation",
+            "chooseLocation",
+            "startLocationUpdate",
+            "onLocationChange"
+        ],
         "mergeVirtualHostAttributes" : true
     },
     "mp-alipay" : {
@@ -32,7 +32,7 @@
       ></up-search>
     </view>
  
-    <!-- 修复点1：绑定total + 修正ref名称 + 移除auto=false（改用默认auto=true更易控制） -->
+
     <z-paging
         ref="paging"
         v-model="planList"
@@ -98,9 +98,9 @@ const searchValue = ref(&#39;&#39;);
 // 分页相关
 const pageNo = ref(1);
 const pageSize = ref(10);
-const total = ref(0);
+
 const planList = ref([]);
-const paging = ref(null); // 修复点2：ref名称与模板中一致
+const paging = ref(null);
 // 养护级别/计划类型映射
 const levelMap = {
   11: '一级养护',
@@ -119,8 +119,6 @@ const handleTabChange = (val) =&gt; {
   console.log(activeTab.value)
   activeTab.value = val.id
   searchValue.value = ''
-  // paging.value.reload()
-  // queryList(pageNo, pageSize)
   paging.value.reload()
 };
 // 搜索/清空搜索
@@ -133,7 +131,7 @@ const handleSearchClear = () =&gt; {
   // searchValue.value = ''
   paging.value.reload()
 };
-// 加载数据（核心修复）
+// 加载数据
 const queryList = async (pageNo, pageSize) => {
   try {
     const params = {
+<template>
+  <view class="u-page">
+    <!-- 工单表单容器 -->
+    <view class="work-order-form-content commonPageLRpadding">
+      <!-- uview-plus表单（Vue3 适配） -->
+      <up-form
+          label-position="left"
+          :model="workOrderForm"
+          ref="workOrderFormRef"
+          labelWidth="220rpx"
+          :rules="workOrderFormRules"
+      >
+        <!-- 1. 工单位置（地图选择） -->
+        <up-form-item
+            label="工单位置"
+            prop="workLocation"
+            border-bottom
+            required
+            @click="chooseWorkLocation(); hideKeyboard()"
+        >
+          <up-input
+              v-model="workOrderForm.workLocation"
+              border="none"
+              readonly
+              suffix-icon="map-fill"
+              placeholder="点击选择工单位置"
+          ></up-input>
+        </up-form-item>
+
+        <!-- 2. 道路名称（下拉框：位置选择后才可点击） -->
+        <up-form-item
+            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
+            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="请输入情况描述（最多150字）"
+              v-model="workOrderForm.problemDesc"
+              count
+              maxlength="150"
+              rows="4"
+          ></up-textarea>
+        </up-form-item>
+      </up-form>
+
+      <!-- 道路名称下拉弹窗 -->
+      <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>
+
+    <!-- 图片分类标签 -->
+    <up-tabs :list="imgTabList" @click="switchImgTab"></up-tabs>
+
+    <!-- 图片上传组件（根据选中标签显示对应列表） -->
+    <view class="img-upload-wrap" v-if="activeImgTab === '1'">
+      <up-form-item label="问题照片" prop="problemImgs" required>
+        <up-upload
+            :file-list="problemImgsList"
+            @after-read="(event) => uploadImgs(event, 'problemImgsList')"
+            @delete="(event) => deleteImg(event, 'problemImgsList')"
+            multiple
+            :max-count="3"
+            upload-text="选择问题照片"
+        ></up-upload>
+      </up-form-item>
+    </view>
+    <view class="img-upload-wrap" v-else>
+      <up-form-item label="完成照片" prop="completeImgs" required>
+        <up-upload
+            :file-list="completeImgsList"
+            @after-read="(event) => uploadImgs(event, 'completeImgsList')"
+            @delete="(event) => deleteImg(event, 'completeImgsList')"
+            multiple
+            :max-count="3"
+            :sizeType="['compressed']"
+            upload-text="选择完成照片"
+        ></up-upload>
+      </up-form-item>
+    </view>
+
+    <!-- 处理结果描述（独立显示） -->
+    <view class="handle-result-wrap">
+      <up-form-item
+          label="处理结果"
+          prop="handleResultDesc"
+          required
+      >
+        <up-textarea
+            placeholder="请输入处理结果描述（最多200字）"
+            v-model="workOrderForm.handleResultDesc"
+            count
+            maxlength="200"
+            rows="4"
+        ></up-textarea>
+      </up-form-item>
+    </view>
+
+    <!-- 底部提交按钮 -->
+    <view class="fixed-bottom-btn-wrap">
+      <up-button
+          type="primary"
+          text="提交工单"
+          @click="submitWorkOrder"
+          :loading="isSubmitting"
+          :disabled="isSubmitting"
+      ></up-button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import type { UniFormRef, UniActionSheetSelectEvent, UploadFile, UploadDeleteEvent } from '@/uni_modules/uview-plus/types'
+// 导入接口
+import { getRoadListByLatLng } from '@/api/common'
+// 导入统一的多文件上传方法
+import { uploadImages } from '@/common/utils/upload';
+import { createQuick } from '@/api/quick-order/quick-order'
+
+// ========== 基础变量定义（语义化命名） ==========
+// 图片分类标签列表
+const imgTabList = ref([
+  { name: '问题照片', id: '1' },
+  { name: '完成照片', id: '2' }
+])
+// 激活的图片标签（默认选中问题照片）
+const activeImgTab = ref('1')
+// 问题照片列表
+const problemImgsList = ref<UploadFile[]>([])
+// 完成照片列表
+const completeImgsList = ref<UploadFile[]>([])
+// 表单Ref（语义化：工单表单）
+const workOrderFormRef = ref<UniFormRef>(null)
+// 提交加载状态
+const isSubmitting = ref(false)
+// 弹窗显隐控制
+const showRoadName = ref(false)
+const showOrderName = ref(false)
+// 下拉列表数据
+const roadNameList = ref<any[]>([])
+const orderNameList = ref([
+  { name: '绿地卫生', code: 'ORDER001' },
+  { name: '设施维修', code: 'ORDER002' },
+  { name: '垃圾清理', code: 'ORDER003' }
+])
+
+// ========== 工单表单数据（语义化字段名） ==========
+const workOrderForm = reactive({
+  roadId: 0,                     // 道路ID
+  roadName: '',                  // 道路名称
+  workLocation: '',              // 工单位置
+  orderName: '',                 // 工单名称
+  problemDesc: '',               // 情况描述
+  handleResultDesc: '',          // 处理结果描述
+  lat: 0,                        // 纬度
+  lon: 0                         // 经度
+})
+
+// ========== 表单校验规则（修复trigger + 语义化） ==========
+const workOrderFormRules = reactive({
+  workLocation: [
+    { type: 'string', required: true, message: '请选择工单位置', trigger: 'change' }
+  ],
+  roadName: [
+    { type: 'string', required: true, message: '请选择道路名称', trigger: 'change' }
+  ],
+  orderName: [
+    { type: 'string', required: true, message: '请选择工单名称', trigger: 'change' }
+  ],
+  problemDesc: [
+    { type: 'string', required: true, message: '请输入情况描述', trigger: 'change' },
+    { type: 'string', min: 3, max: 150, message: '情况描述需3-150字', trigger: 'change' }
+  ],
+  problemImgs: [
+    { required: true, message: '请上传问题照片', trigger: 'change' }
+  ],
+  completeImgs: [
+    { required: true, message: '请上传完成照片', trigger: 'change' }
+  ],
+  handleResultDesc: [
+    { type: 'string', required: true, message: '请输入处理结果描述', trigger: 'change' },
+    { type: 'string', min: 3, max: 200, message: '处理结果需3-200字', trigger: 'change' }
+  ]
+})
+
+// ========== 方法定义（语义化命名 + 修复逻辑） ==========
+/**
+ * 删除图片
+ * @param event 删除事件
+ * @param type 图片类型（problemImgsList/completeImgsList）
+ */
+const deleteImg = (event: UploadDeleteEvent, type: string) => {
+  console.log('删除图片事件：', event, '类型：', type)
+  if (type === 'problemImgsList') {
+    problemImgsList.value.splice(event.index, 1)
+  } else if (type === 'completeImgsList') {
+    completeImgsList.value.splice(event.index, 1)
+  }
+  uni.showToast({ title: '图片删除成功', icon: 'success' })
+}
+
+/**
+ * 上传图片（单/多图统一逻辑）
+ * @param event 上传事件
+ * @param type 图片类型（problemImgsList/completeImgsList）
+ */
+const uploadImgs = async (event: { file: UploadFile | UploadFile[] }, type: string) => {
+  console.log('上传图片事件：', event, '类型：', type)
+  // 统一处理为数组格式
+  const fileList = Array.isArray(event.file) ? event.file : [event.file]
+  const targetImgList = type === 'problemImgsList' ? problemImgsList : completeImgsList
+
+  // 1. 提取文件路径
+  const filePaths = fileList.map(item => item.url)
+  // 2. 添加上传中临时项
+  const tempItems: UploadFile[] = fileList.map(item => ({
+    ...item,
+    status: 'uploading' as const,
+    message: '上传中'
+  }))
+  const startIndex = targetImgList.value.length
+  targetImgList.value.push(...tempItems)
+
+  try {
+    // 3. 调用统一上传方法
+    const uploadResultUrls = await uploadImages({
+      filePaths: filePaths,
+      ignoreError: true
+    })
+    console.log('上传成功的URL列表：', uploadResultUrls)
+
+    // 4. 更新成功状态
+    uploadResultUrls.forEach((url, index) => {
+      if (targetImgList.value[startIndex + index]) {
+        targetImgList.value.splice(startIndex + index, 1, {
+          ...fileList[index],
+          status: 'success' as const,
+          message: '',
+          url: url
+        })
+      }
+    })
+
+    // 5. 处理失败项
+    if (uploadResultUrls.length < fileList.length) {
+      const failCount = fileList.length - uploadResultUrls.length
+      for (let i = uploadResultUrls.length; i < fileList.length; i++) {
+        if (targetImgList.value[startIndex + i]) {
+          targetImgList.value.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' })
+    }
+  } catch (err) {
+    console.error('图片上传失败：', err)
+    // 标记所有为失败
+    for (let i = 0; i < fileList.length; i++) {
+      if (targetImgList.value[startIndex + i]) {
+        targetImgList.value.splice(startIndex + i, 1, {
+          ...fileList[i],
+          status: 'failed' as const,
+          message: '上传失败'
+        })
+      }
+    }
+    uni.showToast({ title: '图片上传失败，请重试', icon: 'none' })
+  }
+}
+
+/**
+ * 切换图片标签
+ * @param item 标签项
+ */
+const switchImgTab = (item: { name: string; id: string }) => {
+  console.log('切换图片标签：', item)
+  activeImgTab.value = item.id
+}
+
+/**
+ * 选择工单位置（地图）- 核心修改：清空道路名称
+ */
+const chooseWorkLocation = () => {
+  if (isSubmitting.value) return
+
+  uni.authorize({
+    scope: 'scope.userLocation',
+    success: () => {
+      uni.chooseLocation({
+        success: async (res) => {
+          // ========== 核心新增：清空道路名称相关数据 ==========
+          workOrderForm.roadName = ''  // 清空道路名称
+          workOrderForm.roadId = 0     // 清空道路ID
+          roadNameList.value = []      // 清空道路名称列表
+
+          // 更新工单位置
+          workOrderForm.workLocation = res.name
+          workOrderForm.lat = res.latitude
+          workOrderForm.lon = res.longitude
+
+          // 触发工单位置和道路名称的表单校验更新
+          workOrderFormRef.value?.validateField('workLocation')
+          workOrderFormRef.value?.validateField('roadName')
+
+          try {
+            uni.showLoading({ title: '获取道路名称中...' })
+            const roadRes = await getRoadListByLatLng({
+              companyCode: 'sls',
+              latitude: res.latitude,
+              longitude: res.longitude
+            })
+            uni.hideLoading()
+
+            if (Array.isArray(roadRes)) {
+              roadNameList.value = roadRes.map((item: any) => ({
+                name: item.roadName || '',
+                code: item.roadCode || '',
+                id: item.roadId || 0
+              }))
+            } else {
+              roadNameList.value = [{ name: '未查询到道路名称', code: '', id: 0 }]
+              uni.showToast({ title: '未查询到该位置的道路信息', icon: 'none' })
+            }
+          } catch (err) {
+            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' })
+        }
+      })
+    },
+    fail: (err) => {
+      console.error('位置授权失败：', err)
+      uni.showModal({
+        title: '权限提示',
+        content: '需要获取您的位置权限才能选择工单位置，请前往设置开启',
+        confirmText: '去设置',
+        cancelText: '取消',
+        success: (res) => {
+          if (res.confirm) {
+            uni.openSetting({
+              success: (settingRes) => {
+                if (settingRes.authSetting['scope.userLocation']) {
+                  uni.showToast({ title: '权限已开启，请重新选择位置', icon: 'none' })
+                }
+              }
+            })
+          }
+        }
+      })
+    }
+  })
+}
+
+/**
+ * 选择道路名称
+ * @param e 选择事件
+ */
+const handleRoadNameSelect = (e: UniActionSheetSelectEvent) => {
+  console.log('选择道路名称：', e)
+  workOrderForm.roadName = e.name
+  workOrderForm.roadId = e.code
+  showRoadName.value = false
+  workOrderFormRef.value?.validateField('roadName')
+}
+
+/**
+ * 选择工单名称
+ * @param e 选择事件
+ */
+const handleOrderNameSelect = (e: UniActionSheetSelectEvent) => {
+  workOrderForm.orderName = e.name
+  showOrderName.value = false
+  workOrderFormRef.value?.validateField('orderName')
+}
+
+/**
+ * 隐藏键盘
+ */
+const hideKeyboard = () => {
+  uni.hideKeyboard()
+}
+
+/**
+ * 提取图片URL数组
+ * @param imgList 图片列表
+ * @returns URL数组
+ */
+const getImgUrlList = (imgList: UploadFile[]) => {
+  console.log('提取图片URL：', imgList)
+  return imgList.filter(item => item.status === 'success').map(item => item.url)
+}
+
+/**
+ * 校验上传图片（兜底校验）
+ * @returns 是否校验通过
+ */
+const validateUploadImgs = () => {
+  // 修复：补充返回值，避免函数无返回
+  if (activeImgTab.value === '1') {
+    const hasValidImgs = problemImgsList.value.some(item => item.status === 'success')
+    if (!hasValidImgs) {
+      uni.showToast({ title: '请上传至少1张问题照片', icon: 'none' })
+      return false
+    }
+  } else {
+    const hasValidcompleteImgs = completeImgsList.value.some(item => item.status === 'success')
+    if (!hasValidcompleteImgs) {
+      uni.showToast({ title: '请上传至少1张完成照片', icon: 'none' })
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * 提交工单（修复核心：await位置 + 表单Ref名称错误）
+ */
+const submitWorkOrder = async () => {
+  if (isSubmitting.value) {
+    uni.showToast({ title: '提交中，请稍候', icon: 'none' })
+    return
+  }
+
+  try {
+    isSubmitting.value = true
+
+    // 修复1：兜底校验图片
+    if (!validateUploadImgs()) {
+      isSubmitting.value = false
+      return
+    }
+
+    // 修复2：使用正确的表单Ref名称（workOrderFormRef 而非 uFormRef）
+    // 修复3：将validate转为Promise形式，配合async/await
+    const valid = await new Promise((resolve) => {
+      workOrderFormRef.value?.validate((isValid) => {
+        resolve(isValid)
+      })
+    })
+
+    if (!valid) {
+      uni.showToast({ title: '表单校验失败，请检查必填项', icon: 'none' })
+      isSubmitting.value = false
+      return
+    }
+
+    // 构造提交数据
+    const submitData = {
+      roadId: workOrderForm.roadId,
+      roadName: workOrderForm.roadName,
+      imgs: getImgUrlList(problemImgsList.value),          // 问题照片URL数组
+      longRangeImgList: getImgUrlList(completeImgsList.value), // 完成照片URL数组
+      remark: activeImgTab.value === '2' ? workOrderForm.handleResultDesc : workOrderForm.problemDesc,
+      latLonType: 2,
+      lat: workOrderForm.lat,
+      lon: workOrderForm.lon,
+      lonLatAddress: workOrderForm.workLocation,
+      pressingType: 2,
+      orderName: workOrderForm.orderName,
+      sourceId: 1,
+      sourceName: '园林',
+      thirdWorkNo: ''
+    }
+
+    console.log('提交工单数据：', submitData)
+    // 修复4：await 现在在async函数中，可正常使用
+    await createQuick(submitData)
+    uni.showToast({ title: '工单提交成功', icon: 'success' })
+
+    // 可选：提交成功后重置表单
+    // problemImgsList.value = []
+    // completeImgsList.value = []
+    // Object.assign(workOrderForm, {
+    //   roadId: 0, roadName: '', workLocation: '', orderName: '',
+    //   problemDesc: '', handleResultDesc: '', lat: 0, lon: 0
+    // })
+    // workOrderFormRef.value?.clearValidate()
+
+  } catch (error) {
+    console.error('提交工单失败：', error)
+    uni.showToast({ title: '提交失败，请重试', icon: 'none' })
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+// ========== 页面挂载初始化 ==========
+onMounted(() => {
+  setTimeout(() => {
+    if (workOrderFormRef.value && !workOrderFormRef.value.rules) {
+      workOrderFormRef.value.setRules(workOrderFormRules)
+      console.log('工单表单规则初始化完成')
+    }
+  }, 200)
+})
+</script>
+
+<style lang="scss" scoped>
+// 全局页面样式
+.u-page {
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 100rpx; // 给底部按钮留空间
+}
+
+// 工单表单容器
+.work-order-form-content {
+  background: #fff;
+  padding: 20rpx;
+  box-sizing: border-box;
+  margin-bottom: 20rpx;
+}
+
+// 图片上传区域
+.img-upload-wrap {
+  background: #fff;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+
+  :deep(.u-upload) {
+    --u-upload-item-width: 200rpx;
+    --u-upload-item-height: 200rpx;
+  }
+
+  :deep(.u-form-item) {
+    margin-bottom: 0;
+  }
+}
+
+// 处理结果描述区域
+.handle-result-wrap {
+  background: #fff;
+  padding: 0 20rpx 20rpx;
+  margin-bottom: 20rpx;
+  border-top: 1px solid #f0f0f0;
+
+  :deep(.u-form-item) {
+    --u-form-item-label-font-size: 28rpx;
+    --u-form-item-content-font-size: 28rpx;
+  }
+
+  :deep(.u-textarea) {
+    --u-textarea-font-size: 28rpx;
+    padding: 10rpx 0;
+  }
+}
+
+// 提交按钮区域
+.fixed-bottom-btn-wrap { // 修复：原样式类名是submit-btn-wrap，与模板不一致
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20rpx;
+  background: #fff;
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+  :deep(.u-button) {
+    width: 100%;
+    height: 80rpx;
+    line-height: 80rpx;
+    font-size: 32rpx;
+    border-radius: 8rpx;
+  }
+}
+
+// ========== 修复Label折行样式 ==========
+:deep(.u-form-item__label) {
+  white-space: nowrap;        // 强制不换行
+  text-overflow: ellipsis;    // 超出省略
+  overflow: hidden;           // 隐藏超出部分
+  line-height: 1.4;           // 行高适配
+}
+
+// 表单基础样式适配
+:deep(.u-form-item) {
+  --u-form-item-label-font-size: 28rpx;
+  --u-form-item-content-font-size: 28rpx;
+  margin-bottom: 10rpx;
+}
+
+:deep(.u-input) {
+  --u-input-font-size: 28rpx;
+}
+
+:deep(.u-textarea) {
+  --u-textarea-font-size: 28rpx;
+  padding: 10rpx 0;
+}
+
+:deep(.u-action-sheet) {
+  z-index: 9999 !important;
+}
+
+:deep(.u-tabs) {
+  background: #fff;
+}
+</style>
 \ No newline at end of file
-<script setup lang="ts">
+<template>
+  <view class="work-order-page">
+    <!-- 顶部固定搜索栏 -->
+    <up-sticky>
+      <view class="search-header">
+        <!-- 左侧下拉框 -->
+        <view class="dropdown-wrap">
+          <up-dropdown ref="uDropdownRef" @open="open" @close="close">
+            <up-dropdown-item
+                v-model="selectedSortValue"
+                title="距离"
+                :options="sortOptions"
+                @change="handleSortChange"
+            />
+          </up-dropdown>
+        </view>
  
-</script>
+        <!-- 右侧搜索框 -->
+        <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>
+    </up-sticky>
  
-<template>
+    <!-- 列表容器 -->
+    <z-paging
+        ref="paging"
+        v-model="orderList"
+        @query="queryList"
+        :top="100"
+    :bottom="120"
+    >
+    <template #empty>
+      <view class="empty-tip">暂无工单数据</view>
+    </template>
+
+    <!-- 修复：新增列表容器，配置顶部内边距 -->
+    <view class="order-list">
+      <view class="order-card" v-for="item in orderList" :key="item.orderNo">
+        <view class="order-item up-line-1">工单编号：{{ item.orderNo }}</view>
+        <view class="order-item up-line-1">工单位置：{{ item.roadName || '未填写' }}</view>
+        <view class="order-item up-line-1">工单名称：{{ item.orderName || '未填写' }}</view>
+        <view class="order-item up-line-1">情况描述：{{ item.remark || '无' }}</view>
+        <view class="order-footer">
+          <view class="submit-time up-line-1">提交时间：{{ timeFormat(item.createTime,'yyyy-mm-dd') }}</view>
+          <up-button
+              type="primary"
+              size="mini"
+              @click="handleDetail(item)"
+              :style="{ width: '80px', height: '28px', fontSize: '14px', borderRadius: 4 }"
+          >
+            工单详情
+          </up-button>
+        </view>
+      </view>
+    </view>
+    </z-paging>
  
+    <!-- 修复：补充底部按钮样式层级 -->
+    <view class="fixed-bottom-btn-wrap">
+      <up-button type="primary" size="large" @click="handleAddOrder">
+        新增工单
+      </up-button>
+    </view>
+  </view>
 </template>
  
-<style scoped>
+<script setup>
+import { ref } from 'vue';
+import { workorderPage } from "@/api/quick-order/quick-order";
+import { timeFormat } from '@/uni_modules/uview-plus';
+// ========== 修复1：声明所有核心响应式变量 ==========
+// 顶部/底部高度（rpx）
+const headerHeight = 100;
+const bottomBtnHeight = 120;
+// 排序相关
+const selectedSortValue = ref(1);
+const sortOptions = ref([
+  { label: '默认排序', value: 1 },
+  { label: '距离优先', value: 2 }
+]);
+// 分页相关（核心：声明orderList）
+const pageNo = ref(1);
+const pageSize = ref(10);
+const paging = ref(null);
+const orderList = ref([]); // 修复：新增列表变量
+// 搜索相关
+const searchValue = ref('');
+
+
+
+// ========== 修复3：适配z-paging回调参数 ==========
+const queryList = async (pageNo,pageSize) => {
+  try {
+    // 修复：z-paging的query回调参数是对象 {pageNo, pageSize}
+    const apiParams = {
+      searchContent: searchValue.value.trim() || '',
+      pageNo: pageNo,
+      pageSize: pageSize,
+      type:1 //  1 位置 2 工单名称 3 情况描述 4 工单编号
+    };
+    console.log('请求参数：', apiParams);
+    const res = await workorderPage(apiParams);
+    console.log('接口返回：', res);
+
+
+    paging.value.complete(res.list);
+  } catch (error) {
+    console.error('加载失败：', error);
+    paging.value?.complete(false);
+    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
+  }
+};
+
+// ========== 其他方法补充 ==========
+const handleSortChange = (val) => {
+  console.log('排序变更：', val);
+  paging.value?.reload(); // 排序后刷新列表
+};
+
+const handleSearch = (val) => {
+  console.log('搜索内容：', val);
+  searchValue.value = val;
+  paging.value?.reload(); // 搜索后刷新列表
+};
+
+const handleDetail = (item) => {
+  console.log('工单详情：', item);
+  uni.navigateTo({
+    url: `/pages-sub/daily/quick-order/order-detail?id=${item.id}`
+  });
+};
+
+const handleAddOrder = () => {
+  uni.navigateTo({
+    url: '/pages-sub/daily/quick-order/add-order'
+  });
+};
+
+// 空方法（避免下拉框报错）
+const open = () => {};
+const close = () => {};
+</script>
+
+<style scoped lang="scss">
+// 修复：页面基础样式
+.work-order-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: border-box;
+}
+
+// 顶部搜索栏
+.search-header {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  background-color: #fff;
+  border-bottom: 1px solid #f0f0f0;
+  height: v-bind(headerHeight + 'rpx');
+  box-sizing: border-box;
+
+  .dropdown-wrap {
+    flex: 1;
+    margin-right: 20rpx;
+  }
+
+  .search-input-wrap {
+    flex: 2;
+  }
+}
+
+// 修复：列表容器样式（核心）
+.order-list {
+  padding: 120rpx 20rpx 20rpx; // 顶部内边距避开搜索栏
+  box-sizing: border-box;
+}
+
+// 空状态样式
+.empty-tip {
+  text-align: center;
+  padding: 100rpx 0;
+  color: #999;
+  font-size: 28rpx;
+}
+
+// 工单卡片样式
+.order-card {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+
+  .order-item {
+    font-size: 28rpx;
+    color: #333;
+    line-height: 48rpx;
+    margin-bottom: 8rpx;
+  }
+
+  .order-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12rpx;
+
+    .submit-time {
+      font-size: 26rpx;
+      color: #666;
+      line-height: 40rpx;
+    }
+  }
+}
  
 </style>
 \ No newline at end of file
+<template>
+  <view class="u-page">
+
+
+    <!-- 页面级加载组件（up-loading-page，uview-plus标准组件） -->
+    <up-loading-page
+        v-if="loading"
+        :loading="true"
+        title="加载中..."
+        color="#3c9cff"
+    ></up-loading-page>
+
+    <!-- 内容容器（仅在非加载状态显示） -->
+    <view v-else class="content-wrap">
+      <!-- 单元格分组（核心uview组件） -->
+      <up-cell-group :border="false" inset style="margin: 20rpx;" >
+        <!-- 1. 工单编号 -->
+        <up-cell
+            title="工单编号"
+            :value="orderDetail.orderNo || '--'"
+            class="up-line-1"
+            align="middle"
+        ></up-cell>
+
+        <!-- 2. 工单位置 -->
+        <up-cell
+            title="工单位置"
+            :value="orderDetail.roadName || '--'"
+            class="up-line-1"
+            align="middle"
+        ></up-cell>
+
+        <!-- 3. 工单名称 -->
+        <up-cell
+            title="工单名称"
+            :value="orderDetail.orderName || '--'"
+            class="up-line-1"
+            align="middle"
+        ></up-cell>
+
+        <!-- 4. 情况描述 -->
+        <up-cell
+            title="情况描述"
+            :value="orderDetail.remark || '--'"
+            class="up-line-1"
+            align="middle"
+        ></up-cell>
+
+        <!-- 5. 问题照片 -->
+        <up-cell title="问题照片" align="top">
+          <view class="cell-content-wrap">
+            <up-album
+                v-if="orderDetail.imgs && orderDetail.imgs.length"
+                :list="formatAlbumList(orderDetail.imgs)"
+                :column="3"
+                :max-count="9"
+                :preview-full-image="true"
+                disabled
+                style="width: 100%;"
+            ></up-album>
+            <text v-else class="empty-text">暂无问题照片</text>
+          </view>
+        </up-cell>
+
+        <!-- 6. 完成照片 -->
+        <up-cell title="完成照片" align="top">
+          <view class="cell-content-wrap">
+            <up-album
+                v-if="orderDetail.longRangeImgList && orderDetail.longRangeImgList.length"
+                :list="formatAlbumList(orderDetail.longRangeImgList)"
+                :column="3"
+                :max-count="9"
+                :preview-full-image="true"
+                disabled
+                style="width: 100%;"
+            ></up-album>
+            <text v-else class="empty-text">暂无完成照片</text>
+          </view>
+        </up-cell>
+
+        <!-- 7. 处理结果 -->
+        <up-cell
+            title="处理结果"
+            :value="orderDetail.handleResultDesc || '--'"
+            class="up-line-1"
+            align="middle"
+            :border="false"
+        ></up-cell>
+      </up-cell-group>
+
+      <!-- 空状态（原生样式，替代up-empty） -->
+      <view v-if="!Object.keys(orderDetail).length" class="empty-wrap">
+        <text class="empty-icon">📄</text>
+        <text class="empty-text">暂无工单详情</text>
+        <text class="empty-subtext">请检查工单ID是否正确</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { inspectionPlanDetail } from "@/api/quick-order/quick-order";
+
+import { onLoad, onShow } from '@dcloudio/uni-app';
+// 状态管理
+const loading = ref(true);
+const orderDetail = ref({});
+
+/**
+ * 格式化相册列表（适配up-album）
+ */
+const formatAlbumList = (imgUrls: string[]) => {
+  return imgUrls.map(url => ({
+    url,
+    thumb: url,
+    name: `图片-${Date.now()}`
+  }));
+};
+
+/**
+ * 获取工单详情
+ */
+const getOrderDetail = async (id: string) => {
+  try {
+    loading.value = true;
+    const res = await inspectionPlanDetail({ id });
+    console.log('接口返回：', res)
+    orderDetail.value = res
+
+  } catch (error) {
+    console.error('获取工单详情失败：', error);
+    uni.showToast({ title: '加载失败，请重试', icon: 'none' });
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 页面加载
+onLoad((options) => {
+  const { id } = options;
+  if (id) {
+    getOrderDetail(id);
+  } else {
+    loading.value = false;
+    uni.showToast({ title: '缺少工单ID', icon: 'none' });
+  }
+});
+</script>
+
+<style scoped lang="scss">
+
+
+// 内容容器（原生滚动）
+.content-wrap {
+  background: #fff;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+// 单元格内容包裹层
+.cell-content-wrap {
+  width: 100%;
+  padding: 10rpx 0;
+  box-sizing: border-box;
+}
+
+// 空文本样式
+.empty-text {
+  color: #999;
+  font-size: 28rpx;
+  line-height: 80rpx;
+  display: block;
+  text-align: left;
+}
+
+// 优化uview组件样式
+:deep(.up-cell-group) {
+  --u-cell-group-background-color: #fff;
+  --u-cell-group-border-radius: 12rpx;
+  --u-cell-group-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+:deep(.up-cell) {
+  --u-cell-title-font-size: 28rpx;
+  --u-cell-value-font-size: 28rpx;
+  --u-cell-title-color: #666;
+  --u-cell-value-color: #333;
+  --u-cell-padding: 20rpx 15rpx;
+  --u-cell-border-color: #f5f5f5;
+}
+:deep(.up-album__item) {
+  margin: 10rpx 5rpx;
+  border-radius: 8rpx;
+}
+
+// 原生空状态样式
+.empty-wrap {
+  margin-top: 200rpx;
+  text-align: center;
+}
+.empty-icon {
+  font-size: 80rpx;
+  display: block;
+  margin-bottom: 20rpx;
+  color: #ddd;
+}
+.empty-text {
+  font-size: 28rpx;
+  color: #999;
+  display: block;
+}
+.empty-subtext {
+  font-size: 24rpx;
+  color: #ccc;
+  margin-top: 10rpx;
+  display: block;
+}
+
+// 适配up-loading-page样式
+:deep(.up-loading-page) {
+  margin-top: 100rpx;
+}
+</style>
 \ No newline at end of file
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>
 \ No newline at end of file
@@ -70,6 +70,16 @@
 					"style": { "navigationBarTitleText": "快速工单" }
 				},
 				{
+					"path": "quick-order/add-order",
+					"style": { "navigationBarTitleText": "新增快速工单" }
+				},
+				{
+					"path": "quick-order/order-detail",
+					"style": { "navigationBarTitleText": "快速工单详情" }
+				},
+
+
+				{
 					"path": "12345-order/index",
 					"style": { "navigationBarTitleText": "12345工单" }
 				},
 <template>
   <!-- 外层容器：包含蓝色块 + 原始内容 -->
   <view class="workbench-container">
+    <!-- 加载页：覆盖整个容器，渲染完成后隐藏 -->
+    <up-loading-page
+        v-if="loading"
+        loading-text="加载中..."
+        color="#577ee3"
+        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;"
+    ></up-loading-page>
+
     <!-- 蓝色装饰块：#577ee3 -->
     <view class="blue-decor-block"></view>
  
@@ -8,7 +16,7 @@
     <view class="content-wrap">
       <!-- uview-plus空状态组件 -->
       <u-empty
-          v-if="!moduleList.length"
+          v-if="!moduleList.length && !loading"
           mode="list"
           text="暂无菜单数据"
           color="#999"
@@ -16,15 +24,13 @@
       ></u-empty>
  
       <!-- 菜单卡片列表（修复header插槽语法，恢复标题显示） -->
-      <view v-else class="menu-card-wrap">
-
+      <view v-else-if="!loading" class="menu-card-wrap">
         <up-card
             :title-size="18"
             v-for="(parentModule, index) in moduleList"
             :key="parentModule.id"
             :title="parentModule.name"
         >
-
           <template #body>
             <view>
               <up-grid
@@ -57,7 +63,7 @@
 </template>
  
 <script setup lang="ts">
-// 原始代码完全保留
+// 原始代码完全保留，新增loading状态
 import {ref, nextTick} from 'vue';
 import { onShow } from '@dcloudio/uni-app';
 import { useUserStore } from '@/pinia/user';
@@ -82,6 +88,8 @@ interface MenuItem {
   children: MenuItem[];
 }
  
+// 新增：加载状态（默认开启）
+const loading = ref(true);
 const userStore = useUserStore();
 const moduleList = ref<MenuItem[]>([]);
  
@@ -96,15 +104,27 @@ const headClick = () =&gt; {
  
 onShow(async () => {
   try {
+    // 重置加载状态
+    loading.value = true;
+
     const rawMenuData = userStore.moduleListInfo || cache.get(globalConfig.cache.moduleListKey);
-    // const rawMenuData = userStore.moduleListInfo as MenuItem[];
     const menuData = rawMenuData || [];
     moduleList.value = menuData;
+
+    // 关键：等待DOM完全渲染后再隐藏加载页
     await nextTick();
+    // 额外延迟（可选，确保视觉更流畅）
+    setTimeout(() => {
+      loading.value = false;
+    }, 300);
+
     console.log('菜单数据：', moduleList.value);
   } catch (error) {
     console.error('获取菜单数据失败：', error);
     moduleList.value = [];
+    // 出错时也隐藏加载页
+    await nextTick();
+    loading.value = false;
   }
 });
  
@@ -179,4 +199,9 @@ const handleMenuClick = (item: MenuItem) =&gt; {
   text-align: center;
   margin-top: 10rpx;
 }
+
+/* 加载页样式优化（可选） */
+:deep(.up-loading-page) {
+  background-color: rgba(255, 255, 255, 0.9);
+}
 </style>
 \ No newline at end of file
 import { defineStore } from 'pinia';
 import cache from '@/common/utils/cache';
 import globalConfig from '@/common/config/global';
-import { login, getUserInfo, logout, moduleList } from '@/api/user';
+import { login, getUserInfo, logout, moduleList, getSimpleDictDataList } from '@/api/user';
  
 export const useUserStore = defineStore('user', {
-  // 1. 状态定义（修正 userId 类型 + 字段名）
+  // 修复1：删除重复的 state 定义，只保留根层级的 state
   state: () => ({
-    token: '',
-    userInfo: {},
-    userId: '',
-    moduleListInfo: '',
-    expireTime: 0,
-    logoutLoading: false // 防重锁移到这里
+    token: cache.get(globalConfig.cache.tokenKey) || '', // 初始值从缓存取（兼容持久化）
+    userInfo: cache.get(globalConfig.cache.userInfoKey) || {},
+    userId: cache.get(globalConfig.cache.userIdKey) || '',
+    moduleListInfo: cache.get(globalConfig.cache.moduleListKey) || '',
+    expireTime: cache.get(globalConfig.cache.expireTimeKey) || 0,
+    dictData: cache.get(globalConfig.cache.dictDataKey) || {},
+    logoutLoading: false
   }),
  
-  // 2. 计算属性（保持不变）
   getters: {
     isLogin: (state) => {
       if (!state.token) return false;
@@ -26,7 +26,6 @@ export const useUserStore = defineStore(&#39;user&#39;, {
     permissions: (state) => state.userInfo.permissions || []
   },
  
-  // 3. 核心动作（修正语法错误 + 登录后自动调用户信息接口）
   actions: {
     async login(params) {
       try {
@@ -37,36 +36,40 @@ export const useUserStore = defineStore(&#39;user&#39;, {
           throw new Error('登录失败，未获取到令牌');
         }
  
-        // 仅更新 Pinia state（持久化插件会自动同步到 storage）
+        // 更新 Pinia state
         this.token = accessToken;
         this.expireTime = expiresTime;
         this.userId = userId;
         this.userInfo = {};
  
-        // 移除手动 cache.set() 代码
-        // cache.set(globalConfig.cache.tokenKey, accessToken);
-        // cache.set(globalConfig.cache.expireTimeKey, expiresTime);
-        // cache.set(globalConfig.cache.userIdKey, userId);
-
-        // 等待 Pinia 持久化同步（可选，50ms 足够）
+        // 等待 Pinia 持久化同步
         await new Promise(resolve => setTimeout(resolve, 50));
  
         // 获取用户信息
         const userInfo = await this.getUserInfo();
         this.userInfo = userInfo;
-        // 移除 cache.set(globalConfig.cache.userInfoKey, userInfo);
  
         // 获取模块列表
         let moduleListInfo = null;
         try {
           moduleListInfo = await this.getModuleList();
           this.moduleListInfo = moduleListInfo;
-          // 移除 cache.set(globalConfig.cache.moduleListKey, moduleListInfo);
         } catch (moduleErr) {
           console.warn('获取模块列表失败（不影响登录）：', moduleErr);
           uni.showToast({ title: '获取模块列表失败，可正常登录', icon: 'none' });
         }
  
+        // 修复2：调用字典接口时，不直接抛错（避免阻断登录）
+        try {
+          const dictRes = await this.getAndSaveDictData();
+          // 仅接口返回成功时才更新字典
+          this.dictData = dictRes || {};
+          console.log('字典数据获取成功：', this.dictData);
+        } catch (dictErr) {
+          console.warn('获取字典失败（不影响登录）：', dictErr);
+          uni.showToast({ title: '获取字典失败，可正常使用', icon: 'none' });
+        }
+
         return { ...res, userInfo, moduleListInfo };
       } catch (err) {
         console.error('登录流程失败：', err);
@@ -74,23 +77,46 @@ export const useUserStore = defineStore(&#39;user&#39;, {
       }
     },
  
+    // 修复3：重构字典获取方法（加 Token 校验 + 强制携带 Token + 宽松错误处理）
+    async getAndSaveDictData() {
+      // 前置校验：无登录态直接返回，不请求接口
+      if (!this.isLogin) {
+        console.warn('未登录，跳过字典获取');
+        return { code: -1, msg: '未登录' };
+      }
+
+      try {
+        // 强制携带 Token（和 getModuleList 保持一致，避免拦截器同步延迟）
+        const res = await getSimpleDictDataList(
+          {}, // 接口入参（按需传，比如 dictType: ['level']）
+          { header: { 'Authorization': `Bearer ${this.token}` } }
+        );
+
+        // 校验接口返回码（核心：避免非 0 码数据存入）
+        if (res.code !== 0) {
+          console.warn('字典接口返回失败：', res.msg);
+          return res; // 返回错误信息，但不抛错
+        }
+        return res;
+      } catch (err) {
+        // 修复4：宽松错误处理，只打印日志，不抛错（避免阻断登录）
+        console.error('字典接口请求异常：', err);
+        return { code: -2, msg: '接口请求异常：' + (err.message || '网络错误') };
+      }
+    },
+
     async getModuleList() {
       try {
-        // 前置校验：无 Token 直接抛错，避免无效请求
         if (!this.token) {
           throw new Error('未获取到登录令牌，无法获取模块列表');
         }
  
-        // 强制携带 Token（覆盖请求工具的自动携带，避免缓存同步延迟）
         const res = await moduleList({}, {
-          header: {
-            'Authorization': `Bearer ${this.token}`
-          }
+          header: { 'Authorization': `Bearer ${this.token}` }
         });
         return res;
       } catch (err) {
         console.error('获取用户菜单失败：', err);
-        // 区分 401 错误：仅登录态失效时抛错，避免触发 logout 循环
         if (err?.data?.code === 401 || err?.message.includes('401')) {
           throw new Error('登录态已过期，请重新登录');
         } else {
@@ -101,7 +127,6 @@ export const useUserStore = defineStore(&#39;user&#39;, {
  
     async getUserInfo() {
       try {
-        // 调用用户信息接口（此时 token 已存入缓存，请求工具会自动携带）
         const res = await getUserInfo();
         return res;
       } catch (err) {
@@ -109,6 +134,7 @@ export const useUserStore = defineStore(&#39;user&#39;, {
         throw new Error('获取用户信息失败，请重新登录');
       }
     },
+
     logout() {
       const pages = getCurrentPages();
       if (pages.length === 0) return;
@@ -119,16 +145,12 @@ export const useUserStore = defineStore(&#39;user&#39;, {
         .split('?')[0];
  
       if (currentPageRoute === loginPath) {
-        // 仅清空 Pinia state（持久化插件自动同步到 storage）
         this.token = '';
         this.userInfo = {};
         this.userId = '';
         this.moduleListInfo = '';
         this.expireTime = 0;
-
-        // 移除手动 cache.remove() 代码
-        // cache.remove(globalConfig.cache.tokenKey);
-        // ... 其他 cache.remove 都删除
+        this.dictData = {};
         return;
       }
  
@@ -141,16 +163,14 @@ export const useUserStore = defineStore(&#39;user&#39;, {
         } catch (err) {
           console.error('退出登录接口调用失败：', err);
         } finally {
-          // 清空 state
           this.token = '';
           this.userInfo = {};
           this.userId = '';
           this.moduleListInfo = '';
+          this.dictData = {};
           this.expireTime = 0;
           this.logoutLoading = false;
  
-          // 移除手动 cache.remove() 代码
-
           uni.redirectTo({
             url: globalConfig.router.loginPath
           });
@@ -160,19 +180,8 @@ export const useUserStore = defineStore(&#39;user&#39;, {
       logoutWithLock();
     },
  
-// 新增：状态中添加 logoutLoading 防重锁
-    state: () => ({
-      token: cache.get(globalConfig.cache.tokenKey) || '',
-      userInfo: cache.get(globalConfig.cache.userInfoKey) || {},
-      userId: cache.get(globalConfig.cache.userIdKey) || '',
-      moduleListInfo: cache.get(globalConfig.cache.moduleListKey) || '',
-      expireTime: cache.get(globalConfig.cache.expireTimeKey) || 0,
-      logoutLoading: false // 新增：退出登录防重锁
-    }),
-
     checkLogin() {
       if (!this.isLogin) {
-        // 先判断是否已在登录页，避免重复跳转
         const pages = getCurrentPages();
         if (pages.length === 0) return false;
  
@@ -192,38 +201,36 @@ export const useUserStore = defineStore(&#39;user&#39;, {
     }
   },
  
-  // 4. 持久化配置（修正：persist 应放在 store 根层级，非 actions 内）
   persist: {
     enabled: true,
-    key: 'user_store', // 自定义存储键名（默认是 store 名 'user'）
+    key: 'user_store',
     storage: {
       getItem: (key) => uni.getStorageSync(key),
       setItem: (key, value) => uni.setStorageSync(key, value),
       removeItem: (key) => uni.removeStorageSync(key)
     },
-    // 自定义序列化：将 state 拆分为原有的 jcss_xxx 键（可选）
     serializer: {
       serialize: (state) => {
-        // 拆分为多个独立键（和原 cache 格式对齐）
         uni.setStorageSync(globalConfig.cache.tokenKey, state.token);
         uni.setStorageSync(globalConfig.cache.userIdKey, state.userId);
         uni.setStorageSync(globalConfig.cache.expireTimeKey, state.expireTime);
         uni.setStorageSync(globalConfig.cache.userInfoKey, state.userInfo);
         uni.setStorageSync(globalConfig.cache.moduleListKey, state.moduleListInfo);
-        return state; // 返回完整 state（兼容 Pinia 默认逻辑）
+        uni.setStorageSync(globalConfig.cache.dictDataKey, state.dictData);
+        return state;
       },
       deserialize: (value) => {
-        // 从多个独立键恢复 state
         return {
           token: uni.getStorageSync(globalConfig.cache.tokenKey) || '',
           userId: uni.getStorageSync(globalConfig.cache.userIdKey) || '',
           expireTime: uni.getStorageSync(globalConfig.cache.expireTimeKey) || 0,
           userInfo: uni.getStorageSync(globalConfig.cache.userInfoKey) || {},
           moduleListInfo: uni.getStorageSync(globalConfig.cache.moduleListKey) || '',
+          dictData: uni.getStorageSync(globalConfig.cache.dictDataKey) || {},
           logoutLoading: false
         };
       }
     },
-    paths: [] // 序列化自定义后，paths 可留空
+    paths: []
   }
 });
 \ No newline at end of file