JCSS / jcss-miniprogram

  <template>

    <view class="page-container" style="padding-bottom: 20px;">

      <!-- 页面级加载组件 -->
      <up-loading-page
          v-if="loading"
          :loading="true"
          title="加载中..."
          color="#3c9cff"
      ></up-loading-page>
  
      <!-- 内容容器 -->

      <template v-else>
        <view class="content-wrap" v-for="(i, index) in orderDetail" :key="index">

          <!-- 工单详情内容 -->

          <up-cell-group :border="false" inset>
            <!-- 1. 工单计划名称 -->

            <up-cell align="middle">

              <template #title>

                <view class="up-line-1">{{i.planName || '--'}}</view>

              </template>

            </up-cell>

  
            <!-- 2. 工单位置 -->
            <up-cell
                title="计划编码"
                :value="i.planNo || '--'"

                align="middle"
            ></up-cell>
  

            <up-cell
                title="养护周期"
                :value="`${i.rate}${uni.$dict.getDictLabel('cycle_id_type', i.cycleId)}`"

                align="middle"
            ></up-cell>
  
            <!-- 4. 情况描述 -->
            <up-cell
                title="计划有效期"

                :value="`${timeFormat(i.beginTime,'yyyy-mm-dd')} 至 ${timeFormat(i.endTime,'yyyy-mm-dd')}`"

                align="middle"
            ></up-cell>
  

            <!-- 5. 问题照片（核心修复：兼容WebP + 强制尺寸） -->

            <!-- <up-cell title="照片">

              <template #value>
                <view class="cell-content-wrap">

  
                  <up-album
                      :urls="i.beginImgList "
                      singleSize="70"
                      multipleSize="70"
                      :preview-full-image="true"
  
                  ></up-album>
  
  <!--                &lt;!&ndash; 修复1：手动渲染图片，兼容WebP + 强制尺寸 &ndash;&gt;-->
  <!--                <view v-if="!!i.beginImgList?.length" class="album-container">-->
  <!--                  <view-->
  <!--                      class="album-item"-->
  <!--                      v-for="(imgUrl, imgIndex) in formatImageUrls(i.beginImgList)"-->
  <!--                      :key="imgIndex"-->
  <!--                      @click="previewImage(imgUrl, formatImageUrls(i.beginImgList))"-->
  <!--                  >-->
  <!--                    <image-->
  <!--                        :src="imgUrl"-->
  <!--                        mode="widthFix"-->
  <!--                        class="album-image"-->
  <!--                        :style="{width: '70px', height: '70px', objectFit: 'cover'}"-->
  <!--                    ></image>-->
  <!--                  </view>-->
  <!--                </view>-->
  <!--                <text v-else class="empty-text">暂无问题照片</text>-->

                <!-- </view>

              </template>

            </up-cell> --> 

  
            <!-- 7. 处理结果 -->

            <!-- <up-cell align="middle">

              <template #title>

                <view style="min-width: 200rpx">养护描述</view>

              </template>
              <template #value>

                <view class="up-line-1 common-text-color">{{i.remark || '--'}}</view>

              </template>

            </up-cell> -->

  
            <up-cell
                title="提交时间"

                :value="i.createTime==null?'--':timeFormat(i.createTime,'yyyy-mm-dd hh:MM:ss')"

                align="middle"

            ></up-cell>
  

            <up-cell
                title="提交人"
                :value="i.userName || '--'"

                align="middle"

            ></up-cell>
          </up-cell-group>

  
          <!-- 动态配置的养护字段填报值（garden_work_record/garden_work_field_value），未填报过则整段不显示 -->

         <!-- 动态配置的养护字段填报值（garden_work_record/garden_work_field_value），未填报过则整段不显示 -->
  <up-cell-group
      v-if="i.fieldRows && i.fieldRows.length"
      :border="false"
      inset
      title=""
  >
    <up-cell v-for="(f, fi) in i.fieldRows" :key="fi"  align="middle">
      <template #title>
  <view class="field-cell-title-multi">{{f.name}}</view>

    </template>

      <template #value>
        <!-- 7 图片：复用本页照片的相册组件（预览/尺寸一致） -->
        <up-album
            v-if="f.kind === 'image'"
            :urls="f.images"
            singleSize="60"
            multipleSize="60"
            :preview-full-image="true"
        ></up-album>
        <!-- 6 多选 / 3 历史多选 / 9 关联记录：标签平铺（自绘，避免引入未使用的组件） -->
        <view v-else-if="f.kind === 'multi'" class="field-tags">
          <view v-for="(t, ti) in f.tags" :key="ti" class="field-tag">{{ t.text }}</view>
        </view>
        <!-- 8 附件：点击下载后用系统应用打开 -->
        <view v-else-if="f.kind === 'file'" class="field-tags">
          <text
              v-for="(file, ui) in f.files"
              :key="ui"
              class="field-file"
              @click="openFile(file)"
          >{{ file.name }}</text>
        </view>
        <!-- 10 链接：小程序不能直接打开外部 URL，点击复制 -->
        <text v-else-if="f.kind === 'link'" class="field-link" @click="copyLink(f.text)">{{ f.text }}</text>
        <!-- 11 地理位置：点击调微信原生地图（无需地图 AK） -->
        <text v-else-if="f.kind === 'geo' && f.geo" class="field-link" @click="openGeo(f.geo)">{{ f.text }}</text>
        <!-- 其余（1数值/2文本/3单选枚举/4日期/5布尔等）文本直出 -->
        <text v-else class="common-text-color field-text">{{ f.text }}</text>
      </template>
    </up-cell>
  </up-cell-group>
  <!-- 当没有填报字段，提示暂无提交记录 -->
  <view v-else class="no-record-tip">
    直接结束了本次任务
  </view>
  

        </view>

      </template>

    </view>
  </template>
  
  <script setup lang="ts">

  import {ref} from 'vue';

  import {detailList,getDetailList} from "@/api/maintain-manage/maintain-manage";

  import {onLoad} from '@dcloudio/uni-app';
  import {timeFormat} from '@/uni_modules/uview-plus';

  // 状态管理
  const loading = ref(true);
  const orderDetail = ref([]);
  

  /**
   * 格式化图片URL（兼容WebP + 清理非法字符）
   * @param urls 原始图片列表
   */
  const formatImageUrls = (urls) => {
    if (!Array.isArray(urls) || urls.length === 0) return [];
  
    return urls.map(url => {
      if (typeof url !== 'string') return '';
      // 1. 清理URL开头的非法字符（如数字、空格）
      const validStart = url.indexOf('http');
      const cleanUrl = validStart > 0 ? url.substring(validStart) : url;
      // 2. 小程序兼容：WebP转JPEG（可选，后端无转换则注释）
      // return cleanUrl.replace('.webp', '.jpeg');
      return cleanUrl;
    }).filter(url => !!url);
  };
  
  /**
   * 预览图片
   * @param currentUrl 当前点击的图片
   * @param allUrls 所有图片列表
   */
  const previewImage = (currentUrl, allUrls) => {
    uni.previewImage({
      current: currentUrl,
      urls: allUrls,
      fail: (err) => {
        console.error('预览图片失败：', err);
        uni.showToast({title: '预览图片失败', icon: 'none'});
      }
    });
  };

  /**
   * 获取工单详情
   */

  const getOrderDetail = async (planNo: string, commitId?: string) => {

    try {
      loading.value = true;

      // 后端 page 接口支持 commitId 精确过滤：从上报记录列表点「查看」时只展示这一条
      let queryData: any = {

        planNo: planNo,

        pageSize: commitId ? 1 : 100,

        pageNo: 1,

      };

      if (commitId) {
        queryData.commitId = commitId;
      }

      const res = await detailList(queryData);

      console.log('接口返回：', res);

      // 修复2：正确解析接口数据（res.data.list 而非 res.list）

      const list = res.data?.list || res.list || [];
      // 预解析动态字段，避免模板里重复 JSON.parse
      orderDetail.value = list.map(item => ({
        ...item,
        fieldRows: (item.fields || []).map(buildFieldRow)
      }));

  
      // 调试：打印格式化后的图片URL
      console.log('格式化后图片URL：', formatImageUrls(orderDetail.value[0]?.beginImgList || []));

    } catch (error) {
      console.error('获取工单详情失败：', error);

      uni.showToast({title: '加载失败，请重试', icon: 'none'});

    } finally {
      loading.value = false;
    }
  };
  

  // ========== 动态配置字段（fieldValue）展示 ==========
  // 解析口径与 PC 端 FieldValueCell.vue + WorkRecordTab.vue 保持一致：
  // 后端 valueText 是「类型无关直拷、提交无校验」，历史格式与脏数据都可能出现，故所有解析一律降级、不抛异常。
  /** 空值 token：与 PC 的 EMPTY_TOKENS 一致 */
  const EMPTY_TOKENS = ['', '[]', '{}', 'null', 'undefined'];
  /** 走「新类型」渲染的字段类型（5布尔/6多选/7图片/8附件/9关联记录/10链接/11地理位置） */
  const NEW_RENDER_TYPES = [5, 6, 7, 8, 9, 10, 11];
  const TRUTHY = ['是', 'true', '1', 'y', 'yes'];
  const FALSY = ['否', 'false', '0', 'n', 'no'];
  
  /** 取原始文本，空/占位值归一成空串 */
  const rawTextOf = (item) => {
    const text = String(item?.valueText ?? '').trim();
    return EMPTY_TOKENS.includes(text) ? '' : text;
  };
  
  /** JSON 数组解析；失败退化为逗号分隔（兼容历史枚举多选的存储格式） */
  const parseArray = (raw) => {
    const text = String(raw ?? '').trim();
    if (!text) return [];
    try {
      const parsed = JSON.parse(text);
      if (Array.isArray(parsed)) return parsed;
      return parsed !== null && typeof parsed === 'object' ? [parsed] : [];
    } catch (e) {
      return text.split(',').map(s => s.trim()).filter(Boolean);
    }
  };
  
  /** JSON 对象解析，非法一律退化成空对象 */
  const parseObject = (raw) => {
    if (!raw) return {};
    try {
      const parsed = JSON.parse(raw);
      return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
    } catch (e) {
      return {};
    }
  };
  
  /** 静态选项 value -> label（后端仅 option_source=1 时回传 options，控体积） */
  const optionsMapOf = (item) => {
    const map = {};
    parseArray(item?.options).forEach(o => {
      if (o && o.value != null) map[String(o.value)] = String(o.label ?? o.value);
    });
    return map;
  };
  
  /**
   * 枚举值 -> 展示文本：优先字典(option_source=2)，其次静态选项表(option_source=1)，都取不到返回空串。
   * 后端「仅静态选项回传 options」就是给客户端渲染标签用的；取不到时调用方退回裸值（与 PC 的 formatValue 一致）。
   */
  const enumLabelOf = (item, value) => {
    if (!value) return '';
    if (item.optionSource === 2 && item.dictType) {
      const label = uni.$dict.getDictLabel(item.dictType, value);
      if (label) return label;
    }
    return optionsMapOf(item)[value] ?? '';
  };
  
  /** 旧类型（1数值/2文本/3单选枚举/4日期）与物料的原文直出，口径同 PC 的 formatValue */
  const legacyText = (item) => {
    // 物料以值行的 materialId 判定（物料字段实际是 fieldType=3 + option_source=3，并非独立类型）
    if (item.materialId != null) {
      return `${item.materialName || ''}${item.quantity != null ? ' × ' + item.quantity : ''}${item.unit ? ' ' + item.unit : ''}`;
    }
    const raw = rawTextOf(item);
    if (raw) return item.unit ? `${raw} ${item.unit}` : raw;
    if (item.valueNumber != null) return item.unit ? `${item.valueNumber} ${item.unit}` : String(item.valueNumber);
    return '-';
  };
  
  const isUrl = (v) => /^(https?:)?\/\//i.test(String(v)) || String(v).startsWith('/');
  
  /** 文件名取 URL 末段（存储不保留原始文件名） */
  const fileNameOf = (url) => {
    const path = String(url).split('?')[0].split('#')[0];
    const name = path.substring(path.lastIndexOf('/') + 1);
    try {
      return decodeURIComponent(name) || url;
    } catch (e) {
      return name || url;
    }
  };
  
  /** 多值元素归一化：兼容裸值("1")与带数量对象({value,label,quantity}) */
  const toMultiItem = (v) => {
    if (v === null || typeof v !== 'object') {
      return { value: String(v), label: '', quantity: null };
    }
    const raw = v.value ?? v.id ?? v.label;
    const qty = Number(v.quantity);
    return {
      value: raw == null ? '' : String(raw),
      label: v.label != null ? String(v.label) : '',
      quantity: v.quantity != null && Number.isFinite(qty) ? qty : null
    };
  };
  
  /**
   * 多值（6多选 / 3历史多选 / 9关联记录）转标签文本。
   * 标签优先级：值行快照 label（9关联记录、6+needQuantity 会带）→ 字典 → 静态选项表 → 裸值。
   * 与 PC 的 DictTag/multiLabel 等价，且对带数量的项同样能显示标签。
   */
  const buildTags = (item) => {
    return parseArray(item.valueText)
      .map(toMultiItem)
      .filter(i => i.value)
      .map(i => {
        const label = i.label || enumLabelOf(item, i.value) || i.value;
        return { text: i.quantity == null ? label : `${label} ×${i.quantity}` };
      });
  };
  
  /** 11 地理位置：JSON 对象 {lng,lat,address}，兼容 "lng,lat" 裸文本 */
  const parseGeo = (source, ext) => {
    let lng = null;
    let lat = null;
    let address = '';
    try {
      const parsed = JSON.parse(source);
      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
        lng = Number(parsed.lng ?? parsed.longitude);
        lat = Number(parsed.lat ?? parsed.latitude);
        address = parsed.address || '';
      }
    } catch (e) {
      // 非法 JSON：继续尝试「经度,纬度」文本形态
    }
    if (!Number.isFinite(lng) || !Number.isFinite(lat)) {
      const parts = String(source).split(',').map(s => Number(s.trim()));
      if (parts.length >= 2 && parts.every(n => Number.isFinite(n))) {
        lng = parts[0];
        lat = parts[1];
        address = '';
      } else {
        return null;
      }
    }
    const precision = Math.min(Math.max(Number(ext.precision) || 6, 0), 8);
    const coord = `${lng.toFixed(precision)}, ${lat.toFixed(precision)}`;
    return { lng, lat, address, text: address ? `${coord}（${address}）` : coord };
  };
  
  /**
   * 把一个字段值行归一化成展示描述 { name, kind, text, tags, images, files, geo }。
   * 分发顺序与 PC 的 isNewTypeValue 完全一致：物料 → 枚举(3) → 新类型(5..11) → 旧类型原文直出。
   */
  const buildFieldRow = (item) => {
    const row = { name: item.fieldName || item.fieldCode || '-', kind: 'text', text: '-', tags: [], images: [], files: [], geo: null };

  
    // ==========【新增修复代码】优先使用后端返回的text快照，解决ce_shi_4 / wu_liao不展示问题==========
    if (item.text != null && String(item.text).trim() !== '') {
      row.text = String(item.text).trim();
      // 注意：图片/多选/布尔等类型，不能直接用item.text，要保留原有解析逻辑，所以只对普通文本类型生效
      // 判断：不是新渲染类型、不是物料，才直接用快照文本
      const isNewType = NEW_RENDER_TYPES.includes(item.fieldType);
      const isMaterial = item.materialId != null;
      if (!isNewType && !isMaterial) {
        return row;
      }
    }
    // =========================================================================================
  

    const raw = rawTextOf(item);
    // ① 物料：优先级最高，即便凑巧带 multiple=1 也不当多值渲染
    if (item.materialId != null || item.fieldType == null) {
      row.text = legacyText(item);
      return row;
    }
    // ② 枚举(3)：multiple=1 是历史多选（逗号分隔）走多值；multiple=0 单选按值查标签(字典/静态选项)
    if (item.fieldType === 3) {
      if (item.multiple !== 1) {
        // 单选存的是 option.value，直接直出会显示成 "2 把"（工具=锄头）这种无意义文本，
        // 故先查标签；option_source 为 3物料/4数据表/5SQL/6接口 时后端不回传选项表，查不到则退回 legacyText(与 PC 一致)
        const label = enumLabelOf(item, raw);
        row.text = label ? (item.unit ? `${label} ${item.unit}` : label) : legacyText(item);
        return row;
      }
      row.kind = 'multi';
      row.tags = buildTags(item);
      if (!row.tags.length) {
        row.kind = 'text';
        row.text = raw || '-';
      }
      return row;
    }
    // ③ 旧类型 1数值/2文本/4日期：原文直出
    if (!NEW_RENDER_TYPES.includes(item.fieldType)) {
      row.text = legacyText(item);
      return row;
    }
    const ext = parseObject(item.extConfig);
    switch (item.fieldType) {
      case 5: { // 布尔：识别不出真/假时退回原文，不臆测
        const lower = raw.toLowerCase();
        row.text = TRUTHY.includes(lower) ? '是' : (FALSY.includes(lower) ? '否' : (raw || '-'));
        break;
      }
      case 6: // 多选
        row.kind = 'multi';
        row.tags = buildTags(item);
        if (!row.tags.length) {
          row.kind = 'text';
          row.text = raw || '-';
        }
        break;
      case 7: // 图片：只接受 URL，空则退回原文
        row.images = parseArray(item.valueText).map(v => String(v)).filter(isUrl);
        row.kind = row.images.length ? 'image' : 'text';
        if (!row.images.length) row.text = raw || '-';
        break;
      case 8: // 附件
        row.files = parseArray(item.valueText).map(v => String(v)).filter(isUrl)
          .map(u => ({ url: u, name: fileNameOf(u) }));
        row.kind = row.files.length ? 'file' : 'text';
        if (!row.files.length) row.text = raw || '-';
        break;
      case 9: // 关联记录：name 随值落库当快照，缺 name 时显示裸 id（不回查选项）
        row.tags = parseArray(item.valueText).map(v => {
          if (v == null) return null;
          if (typeof v === 'object') {
            const id = v.id ?? v.value;
            if (id == null) return null;
            return { text: String(v.name ?? v.label ?? id) };
          }
          return { text: String(v) };
        }).filter(Boolean);
        row.kind = row.tags.length ? 'multi' : 'text';
        if (!row.tags.length) row.text = raw || '-';
        break;
      case 10: { // 链接：仅 http/https，避免 javascript: 之类伪协议
        const pattern = typeof ext.urlPattern === 'string' && ext.urlPattern.includes('{value}')
          ? ext.urlPattern.replace(/\{value\}/g, encodeURIComponent(raw))
          : raw;
        row.kind = 'link';
        row.text = /^https?:\/\//i.test(pattern) ? pattern : (raw || '-');
        break;
      }
      case 11: { // 地理位置
        row.geo = raw ? parseGeo(raw, ext) : null;
        row.kind = row.geo ? 'geo' : 'text';
        row.text = row.geo ? row.geo.text : (raw || '-');
        break;
      }
      default:
        row.text = legacyText(item);
    }
    return row;
  };
  

  /** 8 附件：下载后由系统应用打开（微信小程序无通用文件预览，失败给出提示） */
  const openFile = (file) => {
    uni.showLoading({title: '正在打开...', mask: true});
    uni.downloadFile({
      url: file.url,
      success: (res) => {
        if (res.statusCode !== 200) {
          uni.hideLoading();
          uni.showToast({title: '文件打开失败', icon: 'none'});
          return;
        }
        uni.openDocument({
          filePath: res.tempFilePath,
          showMenu: true,
          complete: () => uni.hideLoading()
        });
      },
      fail: () => {
        uni.hideLoading();
        uni.showToast({title: '文件打开失败', icon: 'none'});
      }
    });
  };
  
  /** 10 链接：小程序不能直接打开外部 URL，改为复制（最接近 PC 可点链接的能力） */
  const copyLink = (url) => {
    uni.setClipboardData({
      data: url,
      success: () => uni.showToast({title: '链接已复制', icon: 'none'})
    });
  };
  
  /** 11 地理位置：调微信原生地图，无需地图 AK */
  const openGeo = (geo) => {
    if (!geo) return;
    uni.openLocation({
      latitude: Number(geo.lat),
      longitude: Number(geo.lng),
      name: geo.address || '作业位置',
      fail: () => uni.showToast({title: '地图打开失败', icon: 'none'})
    });
  };
  

  // 页面加载
  onLoad((options) => {

    const {planNo, commitId} = options;

    if (planNo) {

      getOrderDetail(planNo, commitId);

    } 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;

    margin-bottom: 30rpx;

  }
  

  // 图片容器样式
  .cell-content-wrap {

    //padding: 10rpx 0;

  }
  

  //// 自定义相册容器
  //.album-container {
  //  display: flex;
  //  flex-wrap: wrap;
  //  gap: 10rpx; // 图片间距
  //}
  //
  //// 单张图片样式
  //.album-item {
  //  width: 70px;
  //  height: 70px;
  //  border-radius: 4rpx;
  //  overflow: hidden;
  //}
  //
  //// 图片样式（强制尺寸 + 覆盖）
  //.album-image {
  //  width: 70px;
  //  height: 70px;
  //  object-fit: cover; // 保持比例裁剪，避免拉伸
  //}

  
  // 空文本样式
  .empty-text {
    color: #999;
    font-size: 14px;
    line-height: 70px; // 和图片高度对齐
  }

  
  // ===== 动态配置字段（填报明细） =====
  // 多值（多选/关联记录）标签平铺
  .field-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8rpx;
  }
  
  // 自绘标签：仓库未使用过 up-tag，避免引入未验证组件
  .field-tag {
    padding: 2rpx 12rpx;
    background: #f2f3f5;
    border-radius: 6rpx;
    color: #606266;
    font-size: 24rpx;
    line-height: 36rpx;
  }
  
  // 附件（可点击打开）
  .field-file {
    color: #3c9cff;
    font-size: 26rpx;
    margin-left: 16rpx;
    text-decoration: underline;
  }
  
  // 链接 / 地理位置（可点击）
  .field-link {
    color: #3c9cff;
    font-size: 26rpx;
    word-break: break-all;
  }
  
  // 文本直出（数值/文本/枚举/日期/布尔）
  .field-text {
    font-size: 26rpx;
    word-break: break-all;
  }

  :deep(.field-cell-title-multi) {
    min-width: 160rpx; // 固定左侧标题最大宽度，文字会在这个宽度内自动换行
  }
  

  .no-record-tip {
    padding:24rpx 30rpx;
    font-size:26rpx;
    color:#999;
  }
  
  

  </style>