pms-app/pages/ruiDu/compontents/report-form.vue

<script setup>
  import { useDataDictStore } from '@/store/modules/dataDict';
  import { onMounted, reactive, ref, computed, getCurrentInstance, watch } from 'vue';

  import tpfTimeRange from '@/components/tpf-time-range/tpf-time-range.vue';
  import deviceTransfer from '@/components/device-transfer/index.vue';

  import { updateRuiDuReportBatch, getRuiDuReportAttrs } from '@/api/ruiDu.js';
  import config from '@/utils/config';
  import dayjs from 'dayjs';

  import { getTenantId, getAccessToken } from '@/utils/auth.js';

  const { appContext } = getCurrentInstance();
  const t = appContext.config.globalProperties.$t;

  const { getIntDictOptions, getStrDictOptions, loadDataDictList } = useDataDictStore();

  const rdStatusRange = ref([]);
  const techniqueRange = ref([]);

  const handleInitSelect = () => {
    rdStatusRange.value = getStrDictOptions('rdStatus').map(item => {
      return {
        ...item,
        text: item.label,
      };
    });
    // 施工工艺
    techniqueRange.value = getIntDictOptions('rq_iot_project_technology_rd').map(item => {
      return {
        ...item,
        text: item.label,
      };
    });
  };

  onMounted(() => {
    loadDataDictList().then(() => {
      handleInitSelect();
    });
  });

  const selectPlaceholder = computed(() => {
    return props.formDisable ? ' ' : t('operation.PleaseSelect');
  });

  const inputPlaceholder = computed(() => {
    return props.formDisable ? ' ' : t('operation.PleaseInput');
  });

  const props = defineProps({
    reportId: {
      type: String,
      default: '',
    },
    reportData: {
      type: Object,
      default: () => {},
    },
    formDisable: {
      type: Boolean,
      default: false, // 是否禁用表单
    },
  });

  const isRequired = computed(() => {
    return props.formDisable ? false : true;
  });

  const reportFormRef = ref(null);

  // 设备选择器
  const deviceTransferRef = ref(null);
  // 已选择的设备(名称)
  const selectedEquipmentNames = ref('');
  // 未选择的设备(名称)
  const unselectedEquipmentNames = ref('');

  const timeRangeRef = ref(null);
  const startTime = ref('00:00');
  const startDefaultTime = ref('06:00');
  const endTime = ref('24:00');
  const endDefaultTime = ref('06:00');

  const timeRange = data => {
    form.startTime = data[0];
    form.endTime = data[1];
  };

  const form = reactive({
    startTime: startDefaultTime.value,
    endTime: endDefaultTime.value,
    platformIds: [],
    deviceIds: [],
    productionStatus: '',
    nextPlan: '',
    externalRental: '',
    faultDowntime: '',
    malfunction: '',
    attachments: [],
    reportFuels: [],
  });

  const formDataBaseRules = reactive({
    // 时间节点 - 开始时间
    startTime: {
      rules: [
        {
          required: true,
          errorMessage: `${t('operation.PleaseSelect')}${t('ruiDu.timeNode')}`,
        },
      ],
    },
    // 时间节点 - 结束时间
    endTime: {
      rules: [
        {
          required: true,
          errorMessage: `${t('operation.PleaseSelect')}${t('ruiDu.timeNode')}`,
        },
      ],
    },
    // 当日生产动态
    productionStatus: {
      rules: [
        {
          required: true,
          errorMessage: `${t('operation.PleaseFillIn')}${t('ruiDu.dailyProductionDynamic')}`,
        },
      ],
    },
  });

  const validate = async () => {
    return await reportFormRef.value.validate();
  };

  const submitForm = async () => {
    const deleteId = wellOptions.value.filter(o => !form.platformIds.includes(o.value));
    deleteId.forEach(o => {
      delete form[o.value];
    });
    await validate();
    // // 处理表单数据
    const formDataCopy = JSON.parse(JSON.stringify(form));

    const responseData = [];
    // // 处理施工工艺
    form.platformIds.forEach(id => {
      formDataCopy[id].extProperty.forEach(attr => {
        if (attr.dataType === 'double') {
          attr.actualValue = Number(attr.actualValue);
        }
      });

      const attachments = JSON.parse(JSON.stringify(formDataCopy.attachments)).map(item => {
        item.bizId = id;
        return item;
      });

      let platformWell = props.reportData.platformWell;

      if (platformWell === 1) {
        platformWell = id === props.reportData.id ? 1 : 2;
      }

      const data = {
        id,
        timeRange: ['1970-01-01T00:00:00.008Z', '1970-01-01T00:00:00.008Z'],
        projectDepartment: '',
        costCenter: '',
        dynamicFields: {},
        platformWell,
        companyId: props.reportData.companyId,
        deptId: props.reportData.deptId,
        attachments,
        deviceIds: formDataCopy.deviceIds,
        startTime: formDataCopy.startTime,
        endTime: formDataCopy.endTime,
        extProperty: formDataCopy[id].extProperty,
        externalRental: formDataCopy.externalRental,
        faultDowntime: formDataCopy.faultDowntime,
        malfunction: formDataCopy.malfunction,
        nextPlan: formDataCopy.nextPlan,
        ...(props.reportData.platformWell === 1
          ? { platformId: props.reportData.platforms.find(v => v.reportId === id).id }
          : {}),
        productionStatus: formDataCopy.productionStatus,
        rdStatus: formDataCopy[id].rdStatus,
        techniqueIds: formDataCopy[id].techniqueIds.map(v => v.toString()),
        reportFuels: formDataCopy.reportFuels.map(item => ({
          ...item,
          customFuel: Number(item.customFuel),
          reportId: id,
        })),
      };

      responseData.push(data);
    });

    // 提交表单
    updateRuiDuReportBatch(responseData).then(res => {
      // 提交成功
      if (res.code === 0) {
        uni.showToast({ title: t('operation.success'), icon: 'none' });
        // 返回上一页
        uni.navigateBack();
      } else {
        uni.showToast({ title: res.msg, icon: 'none' });
      }
    });
  };

  const handleClickSelectDevice = () => {
    deviceTransferRef.value.open();
  };

  const handleEquipmentNames = deviceIds => {
    form.deviceIds = deviceIds || []; //施工设备
    const { selectedDevices = [] } = props.reportData || {};
    const deviceIdSet = new Set(deviceIds);
    //   已选择的设备(名称)
    selectedEquipmentNames.value = selectedDevices
      .filter(item => deviceIdSet.has(item.id))
      .map(item => item.deviceName)
      .join(',');

    //   未选择的设备(名称)
    unselectedEquipmentNames.value =
      selectedDevices
        .filter(item => !deviceIdSet.has(item.id))
        .map(item => item.deviceName)
        .join(',') || t('ruiDu.allEquipmentConstructed');
  };

  // 设备选择器回调
  const handleTransferChange = selectedIds => {
    // 更新已选择的设备及名称
    handleEquipmentNames(selectedIds);
  };

  const formDataFormat = () => {
    // 处理时间范围
    timeRangeFormat();
    // 处理已选择的设备
    if (props.reportData?.deviceIds) {
      const { deviceIds = [] } = props.reportData || {};
      handleEquipmentNames(deviceIds);
    }

    if (props.reportData.platformWell === 1) {
      form.platformIds = props.reportData.platforms?.map(v => v.reportId) ?? [];
    } else {
      form.platformIds = [props.reportData.id];
    }

    // if (props.formDisable) {

    // } else {
    //   form.platformIds = [props.reportData.id];
    // }

    if (props.reportData.platformWell === 1) {
      props.reportData.platforms.forEach(p => {
        form[p.reportId] = { rdStatus: p.rdStatus, techniqueIds: p.techniqueIds, extProperty: p.extProperty };
      });
    } else {
      form[props.reportData.id] = {
        rdStatus: props.reportData.rdStatus,
        techniqueIds: props.reportData.techniqueIds,
        extProperty: props.reportData.extProperty,
      };
    }

    // 当日生产动态
    form.productionStatus = props.reportData.productionStatus || ''; //当日生产动态
    // 下步工作计划
    form.nextPlan = props.reportData.nextPlan || ''; //下步工作计划
    // 外租设备
    form.externalRental = props.reportData.externalRental || ''; //外租设备
    // 故障情况
    form.malfunction = props.reportData.malfunction || ''; //故障情况
    // 故障误工H
    form.faultDowntime = props.reportData.faultDowntime || ''; //故障误工H
    // 附件
    form.attachments = props.reportData.attachments || [];

    form.reportFuels = (props.reportData.reportFuels || []).map(v => ({
      ...v,
      customFuel: Number(Number(v.zhbdFuel ?? 0).toFixed(2)),
    }));

    form.dailyFuel = form.reportFuels.reduce((prev, cur) => prev + Number(cur.customFuel), 0);

    // form.
    // 展示用的文件列表
    // attachmentsFileList.value =
    //   props.reportData?.attachments?.map(item => ({
    //     ...item,
    //     name: item.filename,
    //     url: item.filePath,
    //   })) || [];
  };
  // 初始化时间范围
  const timeRangeFormat = () => {
    if (props.reportData.startTime) {
      const startArr = props.reportData.startTime;
      form.startTime = `${startArr[0].toString().padStart(2, '0')}:${startArr[1].toString().padStart(2, '0')}`;
    }
    if (props.reportData.endTime) {
      const endArr = props.reportData.endTime;
      form.endTime = `${endArr[0].toString().padStart(2, '0')}:${endArr[1].toString().padStart(2, '0')}`;
    }
  };

  watch(
    () => props.reportData,
    val => {
      if (val.id) {
        formDataFormat();
      }
    },
    { deep: true, immediate: true }
  );

  const wellOptions = computed(() => {
    return (
      props.reportData.platforms?.map(v => ({
        text: v.wellName,
        value: v.reportId,
      })) ?? []
    );
  });

  const handleClickTimeRange = () => {
    // 打开时间范围选择器
    timeRangeRef.value.open();
  };

  const uploadRef = ref(null);

  const attachmentList = ref([]);

  const chooseFile = () => {
    uploadRef.value.chooseFile({
      count: 9,
      size: 50,
      success: files => {
        attachmentList.value = attachmentList.value.concat(files);
        attachmentList.value.forEach(file => {
          // 将等待上传和上传失败的文件提交上传到服务器
          // 提示：：：如果接口不支持跨域，改成调用this.getTempFilePath(file)
          if (file.status === 'waiting' || file.status === 'fail') {
            uploadHandle(file);
          }
        });
      },
    });
  };

  const uploadHandle = file => {
    uploadRef.value.upload({
      url: config.default.apiUrl + config.default.apiUrlSuffix + '/rq/file/upload',
      file,
      name: 'files',
      header: {
        'Authorization': getAccessToken() ? 'Bearer ' + getAccessToken() : '',
        'Tenant-id': getTenantId() ? getTenantId() : '1',
        'Device-id': 'undefined',
      },
      method: 'post',
      success: e => {
        file.status = 'success';
        const result = JSON.parse(e.result);

        if (result.code !== 0) {
          uni.showToast({
            title: `【${file.name}】${t('operation.uploadFail')}`,
            icon: 'none',
          });
          return;
        }

        form.attachments.push({
          bizId: props.reportId,
          category: 'daily_report',
          filePath: result.data.files[0].filePath,
          filename: result.data.files[0].name,
          // fileSize: data.files[0].size,
          // fileType: data.files[0].type,
          remark: '',
          type: 'attachment',
        });
      },
      fail: e => {
        file.status = 'fail';
        console.error('上传异常:', err);
        uni.showToast({ title: t('operation.uploadFail'), icon: 'none' });
      },
    });
  };

  // const uploadHandle = file => {
  //   uploadRef.value.getTempFilePath({
  //     file,
  //     success: e => {
  //       uni.uploadFile({
  //         url: config.default.apiUrl + config.default.apiUrlSuffix + '/rq/file/upload',
  //         header: {
  //           'Authorization': getAccessToken() ? 'Bearer ' + getAccessToken() : '',
  //           'tenant-id': getTenantId() ? getTenantId() : '1',
  //           'device-id': undefined,
  //         },
  //         name: 'files',
  //         // #ifdef H5
  //         file: e.result,
  //         // #endif
  //         // #ifndef H5
  //         filePath: e.result,
  //         // #endif
  //         success: e => {
  //           console.log('e :>> ', e);
  //           //             file.status = 'success';
  //           // const result = JSON.parse(e.result);
  //           // if (e.code !== 0) {
  //           //   uni.showToast({
  //           //     title: `【${file.name}】${t('operation.uploadFail')}`,
  //           //     icon: 'none',
  //           //   });
  //           //   return;
  //           // }
  //           // form.attachments.push({
  //           //   bizId: props.reportId,
  //           //   category: 'daily_report',
  //           //   filePath: data.files[0].filePath,
  //           //   filename: data.files[0].name,
  //           //   // fileSize: data.files[0].size,
  //           //   // fileType: data.files[0].type,
  //           //   remark: '',
  //           //   type: 'attachment',
  //           // });
  //         },
  //         fail: e => {
  //           console.log('e :>> ', e);
  //         },
  //       });
  //     },
  //   });
  // };

  // 删除附件
  const deleteFiles = index => {
    // 1. 从formData.attachments中移除选中项
    form.attachments.splice(index, 1);
  };
  // 下载文件
  const downloadFile = async file => {
    console.log('🚀 ~ downloadFile ~ file:', file);
    const { filePath: fileUrl, name: fileName } = file;
    if (!fileUrl) {
      uni.showToast({ title: t('operation.fileUrlEmpty'), icon: 'none' });
      return;
    }
    // 获取平台
    const platform = uni.getSystemInfoSync().platform;
    console.log('🚀 ~ downloadFile ~ platform:', platform);
    // 判断平台
    if (platform === 'android') {
      uni.downloadFile({
        url: fileUrl,
        success: res => {
          console.log('🚀 ~ downloadFile ~ res:', res);
          if (res.statusCode === 200) {
            uni.saveFile({
              tempFilePath: res.tempFilePath,
              success: res => {
                console.log('🚀 ~ downloadFile saveFile ~ res:', res);
                uni.showToast({
                  title: t('operation.downloadSuccess'),
                  icon: 'none',
                });
              },
              fail: err => {
                console.log('🚀 ~ downloadFile saveFile ~ err:', err);
                uni.showToast({
                  title: t('operation.downloadFail'),
                  icon: 'none',
                });
              },
            });
          }
        },
        fail: err => {
          console.log('🚀 ~ downloadFile ~ err:', err);
          uni.showToast({
            title: t('operation.downloadFail'),
            icon: 'none',
          });
        },
      });
    } else {
      try {
        // 2.1 处理文件名（避免特殊字符乱码，如中文、空格）
        const safeFileName = decodeURIComponent(fileName || '未命名文件'); // 解码URL编码的文件名

        // 2.2 创建隐藏的 <a> 标签（核心：利用 download 属性触发下载）
        const link = document.createElement('a');
        // 关键：设置 download 属性指定文件名（Web 端独有）
        link.download = safeFileName;
        // 设置文件地址（若跨域，需后端配置 CORS + Content-Disposition 响应头）
        link.href = fileUrl;
        // 隐藏 <a> 标签（不影响页面布局）
        link.style.display = 'none';
        // 将 <a> 标签添加到文档中（否则部分浏览器无法触发点击）
        document.body.appendChild(link);

        // 2.3 模拟点击 <a> 标签触发下载
        link.click();

        // 2.4 下载后清理资源（避免内存泄漏）
        setTimeout(() => {
          document.body.removeChild(link); // 移除 <a> 标签
          URL.revokeObjectURL(link.href); // 释放 URL 资源（若使用 Blob 时必需）
        }, 100);
      } catch (err) {
        console.error('🚀 ~ Web 端下载失败:', err);
        // 若直接通过 <a> 标签下载失败（如跨域），尝试通过 Blob 流下载（场景2兼容）
        await downloadFileByBlob(fileUrl, fileName);
      }
    }
  };
  // 兼容场景2：通过 Blob 流下载（解决跨域或后端返回流的情况）
  const downloadFileByBlob = async (fileUrl, fileName) => {
    try {
      // 1. 发起请求获取文件流（注意：需设置 responseType: 'blob'）
      const response = await fetch(fileUrl, {
        method: 'GET',
        headers: {
          // 若需要登录态，添加 token（根据项目授权方式调整）
          Authorization: `Bearer ${uni.getStorageSync('token')}`,
        },
      });

      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }

      // 2. 将响应转换为 Blob 对象（根据文件类型设置 MIME，如 PDF 为 'application/pdf'）
      const blob = await response.blob();
      // 3. 生成 Blob 临时 URL
      const blobUrl = URL.createObjectURL(blob);

      // 4. 用 <a> 标签触发下载（同场景1逻辑）
      const safeFileName = decodeURIComponent(fileName || '未命名文件');
      const link = document.createElement('a');
      link.download = safeFileName;
      link.href = blobUrl;
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();

      // 5. 清理资源
      setTimeout(() => {
        document.body.removeChild(link);
        URL.revokeObjectURL(blobUrl); // 必须释放 Blob URL，避免内存泄漏
        uni.hideLoading();
        // uni.showToast({ title: t("operation.downloadSuccess"), icon: "success" });
      }, 100);
    } catch (err) {
      console.error('🚀 ~ Blob 下载失败:', err);
      uni.hideLoading();
      // uni.showToast({ title: t("operation.downloadFail"), icon: "error" });
    }
  };

  const removeSelectedItem = (platformId, value) => {
    form[platformId].techniqueIds = form[platformId].techniqueIds.filter(item => item !== value);
    getWorkloadInfoByTechnique(platformId);
  };

  const getWorkloadInfoByTechnique = platformId => {
    const ids = form[platformId].techniqueIds;
    if (!ids.length) {
      form[platformId].extProperty = [];
      return;
    }
    getRuiDuReportAttrs({
      techniqueIds: ids.join(','),
    }).then(res => {
      const { data = [] } = res;

      // 1. 按 "identifier+unit" 去重：用Map保证唯一，key为拼接字段
      const uniqueMap = new Map();
      data.forEach(item => {
        // 生成去重key（identifier和unit都存在才拼接，避免异常）
        const key =
          item.identifier && item.unit ? `${item.identifier}-${item.unit}` : Math.random().toString(36).slice(2, 11); // 异常情况用随机key避免重复
        uniqueMap.set(key, item); // 重复key会覆盖，实现去重
      });
      // 去重后的数组
      const uniqueData = Array.from(uniqueMap.values());

      // 2. 对比formData.extProperty，保留已有actualValue（避免覆盖用户输入）
      const handledData = uniqueData.map(newItem => {
        // 生成当前新项的去重key
        const newKey = newItem.identifier && newItem.unit ? `${newItem.identifier}-${newItem.unit}` : '';

        // 在原有extProperty中找匹配项
        const oldItem = form[platformId].extProperty.find(old => {
          const oldKey = old.identifier && old.unit ? `${old.identifier}-${old.unit}` : '';
          return newKey && oldKey && newKey === oldKey;
        });

        // 有匹配项则复用原有actualValue，无则用新项的（默认空）
        return {
          ...newItem,
          actualValue: oldItem?.actualValue ?? newItem.actualValue,
        };
      });

      // 3. 重新赋值给formData.extProperty（更新页面展示）
      form[platformId].extProperty = handledData;
    });
  };

  defineExpose({
    submitForm,
  });
</script>

<template>
  <scroll-view scroll-y="true" class="report-form">
    <uni-forms
      ref="reportFormRef"
      labelWidth="140px"
      :modelValue="form"
      :rules="formDataBaseRules"
      err-show-type="toast">
      <uni-forms-item
        v-if="reportData.platformWell === 1"
        class="form-item well-form-item"
        label="平台井"
        :required="isRequired">
        <uni-data-select
          class="form-item-select"
          :clear="false"
          align="right"
          placeholder="请选择平台井"
          :disabled="formDisable"
          :localdata="wellOptions"
          multiple
          v-model="form.platformIds" />
      </uni-forms-item>

      <div class="content">
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.timeNode')}:`" :required="isRequired">
          <view class="item-content" @click="props.formDisable ? '' : handleClickTimeRange()">
            <view class="time-range-item" v-if="form.startTime && form.endTime">
              {{ form.startTime }} 至 {{ form.endTime }}
            </view>
            <view class="time-range-item" v-else>
              {{ selectPlaceholder }}
            </view>
          </view>
        </uni-forms-item>
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.constructionEquipment')}:`">
          <view>
            <uni-row class="item-content">
              <button
                class="mini-btn form-item-btn"
                type="primary"
                :disabled="formDisable"
                v-if="!formDisable"
                @click="handleClickSelectDevice">
                {{ $t('device.selectDevice') }}
              </button>
            </uni-row>
            <uni-row>
              <uni-easyinput
                style="text-align: right"
                type="textarea"
                :autoHeight="true"
                :inputBorder="false"
                :clearable="false"
                :styles="{ disableColor: '#fff' }"
                :placeholder="$t('ruiDu.unselectedEquipment')"
                :disabled="true"
                v-model="selectedEquipmentNames" />
            </uni-row>
          </view>
        </uni-forms-item>
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.unselectedEquipment')}:`">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="' '"
            :disabled="true"
            v-model="unselectedEquipmentNames" />
        </uni-forms-item>
        <uni-forms-item class="form-item" label="当日油耗(L)：">
          <uni-easyinput
            class="digit-item"
            type="number"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="form.dailyFuel" />
        </uni-forms-item>

        <uni-forms-item
          class="form-item"
          :label="`${$t('ruiDu.dailyProductionDynamic')}:`"
          :required="isRequired"
          name="productionStatus">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="form.productionStatus"
            :maxlength="1000" />
        </uni-forms-item>
        <!-- 下步工作计划 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.nextWorkPlan')}:`" name="nextPlan">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="form.nextPlan"
            :maxlength="1000" />
        </uni-forms-item>
        <!-- 外租设备 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.externalRentalEquipment')}:`" name="externalRental">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="form.externalRental"
            :maxlength="1000" />
        </uni-forms-item>
        <!-- 故障情况 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.faultSituation')}:`" name="malfunction">
          <uni-easyinput
            style="text-align: right"
            type="textarea"
            :autoHeight="true"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="form.malfunction"
            :maxlength="1000" />
        </uni-forms-item>
        <!-- 故障误工H -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.faultDowntimeH')}:`" name="faultDowntime">
          <uni-easyinput
            class="digit-item"
            type="digit"
            :inputBorder="false"
            :clearable="true"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="form.faultDowntime"
            :maxlength="1000" />
        </uni-forms-item>
        <!-- 附件 -->
        <uni-forms-item class="form-item" :label="`${$t('ruiDu.attachment')}:`" :required="false" name="attachments">
          <view v-if="!formDisable" class="file-parent">
            <view class="file-picker-container item-end">
              <view class="file-size-limit">
                {{ $t('ruiDu.fileSizeLimit') }}
              </view>
              <button type="primary" size="mini" class="file-picker-btn" @click="chooseFile">
                {{ $t('ruiDu.selectFile') }}
              </button>
            </view>
            <view class="file-list">
              <view v-for="(file, index) in form.attachments" :key="index">
                {{ file.filename }}
                <button @click="deleteFiles" type="primary" size="mini" class="file-picker-btn">删除文件</button>
              </view>
            </view>
          </view>
          <view class="file-list item-col" v-else>
            <view v-for="(file, index) in form.attachments" :key="index">
              {{ file.filename }}
              <!-- <button @click="downloadFile(file)" type="primary" size="mini" class="file-picker-btn">下载文件</button> -->
            </view>
          </view>
        </uni-forms-item>
      </div>

      <div v-for="(platformId, index) in form.platformIds" :key="platformId" class="content">
        <div class="content-title">{{
          wellOptions.find(item => item.value === platformId)?.text ?? reportData.wellName ?? ''
        }}</div>
        <uni-forms-item
          class="form-item"
          :label="`${$t('ruiDu.constructionStatus')}:`"
          :required="isRequired"
          :name="[platformId, 'rdStatus']"
          :rules="[{ required: true, errorMessage: `${t('operation.PleaseSelect')}${t('ruiDu.constructionStatus')}` }]">
          <uni-data-select
            class="form-item-select items-center"
            :clear="false"
            :align="'right'"
            placement="top"
            :localdata="rdStatusRange"
            :placeholder="selectPlaceholder"
            :disabled="formDisable"
            v-model="form[platformId].rdStatus">
          </uni-data-select>
        </uni-forms-item>
        <uni-forms-item
          class="form-item"
          :label="`${$t('ruiDu.constructionProcess')}:`"
          :required="reportData.virtualProject !== 'Y' ? isRequired : false"
          :name="[platformId, 'techniqueIds']"
          :rules="
            reportData.virtualProject !== 'Y'
              ? [{ required: true, errorMessage: `${t('operation.PleaseSelect')}${t('ruiDu.constructionProcess')}` }]
              : []
          ">
          <uni-data-select
            ref="uniDataSelect"
            mode="underline"
            :multiple="true"
            :clear="false"
            :localdata="techniqueRange"
            :disabled="formDisable"
            placement="top"
            @change="getWorkloadInfoByTechnique(platformId)"
            v-model="form[platformId].techniqueIds">
            <template v-slot:selected="{ selectedItems }" class="form-item">
              <view class="slot-box flex flex-row items-center justify-end">
                <view
                  v-for="item in selectedItems"
                  :key="item.value"
                  class="slot-content-item selected items-center justify-start">
                  {{ item.text }}
                  <uni-icons
                    type="close"
                    size="18"
                    color="#909399"
                    v-if="!formDisable"
                    @click="removeSelectedItem(platformId, item.value)"></uni-icons>
                </view>
                <view v-if="selectedItems.length == 0" class="slot-content-item items-center justify-start">
                  {{ selectPlaceholder }}
                </view>
              </view>
            </template>
            <template v-slot:option="{ item, itemSelected }">
              <view class="slot-item">
                <uni-list-item class="flex-row items-center justify-between">
                  <template v-slot:body>
                    <text class="slot-item-text justify-start" :style="{ color: itemSelected ? '#007aff' : '#303133' }">
                      {{ item.text }}
                    </text>
                  </template>
                  <template v-slot:footer>
                    <uni-icons
                      class="items-center justify-center"
                      v-if="itemSelected"
                      type="checkmarkempty"
                      size="20"
                      color="#007aff"></uni-icons>
                  </template>
                </uni-list-item>
              </view>
            </template>
            <template v-slot:empty>
              <view class="empty-box">
                <view>{{ $t('common.noData') }}</view>
              </view>
            </template>
          </uni-data-select>
        </uni-forms-item>
        <uni-forms-item
          class="form-item"
          v-for="(attr, index) in form[platformId].extProperty"
          :key="index"
          :label="`${attr.name}(${attr.unit}):`"
          :required="attr.required == 1 && isRequired"
          :name="[platformId, 'extProperty', index, 'actualValue']"
          :rules="[{ required: true, errorMessage: `${t('operation.PleaseFillIn')}${attr.name}` }]">
          <uni-easyinput
            v-if="attr.dataType === 'double'"
            class="digit-item"
            type="digit"
            :inputBorder="false"
            :clearable="true"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="form[platformId].extProperty[index].actualValue" />
          <uni-easyinput
            v-else
            style="text-align: right"
            :styles="{ disableColor: '#fff' }"
            :inputBorder="false"
            :clearable="true"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="form[platformId].extProperty[index].actualValue"
            :type="'textarea'"></uni-easyinput>
        </uni-forms-item>
      </div>

      <div v-for="(fuel, index) in form.reportFuels" :key="index" class="content">
        <div class="content-title">{{ fuel.deviceCode }}</div>
        <uni-forms-item class="form-item" label="设备名称：">
          <view style="text-align: right; width: 100%; padding-right: 10px; box-sizing: border-box">{{
            fuel.deviceName
          }}</view>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="发生日期：">
          <view style="text-align: right; width: 100%; padding-right: 10px; box-sizing: border-box">{{
            dayjs(fuel.queryDate).format('YYYY-MM-DD')
          }}</view>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="中航北斗油耗(L)：">
          <view style="text-align: right; width: 100%; padding-right: 10px; box-sizing: border-box">{{
            (fuel.zhbdFuel ?? 0).toFixed(2)
          }}</view>
        </uni-forms-item>
        <uni-forms-item class="form-item" label="实际油耗(L)：">
          <uni-easyinput
            class="digit-item"
            type="number"
            :inputBorder="false"
            :clearable="false"
            :styles="{ disableColor: '#fff' }"
            :placeholder="inputPlaceholder"
            :disabled="formDisable"
            v-model="fuel.customFuel" />
        </uni-forms-item>
      </div>
    </uni-forms>
  </scroll-view>

  <lsj-upload ref="uploadRef"></lsj-upload>

  <tpf-time-range
    ref="timeRangeRef"
    :startTime="startTime"
    :startDefaultTime="startDefaultTime"
    :endTime="endTime"
    :endDefaultTime="endDefaultTime"
    @timeRange="timeRange"></tpf-time-range>

  <device-transfer
    ref="deviceTransferRef"
    :allList="reportData.selectedDevices"
    :selected="form.deviceIds"
    @confirm="handleTransferChange" />
</template>

<style lang="scss" scoped>
  @import '@/style/work-order-form.scss';
  .report-form {
    height: 100%;
    color: #333;
  }

  :deep(.uni-textarea-textarea:disabled),
  :deep(.uni-input-input:disabled) {
    color: #333;
  }
  :deep(.uni-date-x) {
    color: #333;
  }
  .digit-item {
    text-align: right;
    :deep(.uni-easyinput__content-input) {
      padding-right: 10px;
    }
  }

  .well-form-item {
    background-color: #fff;
    border-bottom: none;
    padding: 0 10px;
  }

  .form-item-select {
    width: 100%;
  }

  .form-item-btn {
    margin: 10px 0 0 0;
    width: 80px;
    text-align: center;
  }

  .digit-item {
    text-align: right;
    :deep(.uni-easyinput__content-input) {
      padding-right: 10px;
    }
  }
  .file-picker-container {
    width: 100%;
  }

  .file-picker-btn {
    margin-left: unset;
    margin-right: unset;
  }

  .file-size-limit {
    font-size: 10px;
    color: #ff4500;
    padding: 0 10px;
  }

  .file-parent {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding: 10px 0;
  }

  .file-list {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
    max-width: 300px;

    & > view {
      width: 100%;
      padding: 10px;
      padding-right: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .slot-box {
    width: 100%;
    flex-wrap: wrap;
  }
  .slot-content-item {
    font-size: 12px;
    color: #6a6a6a;
    &.selected {
      background: #f4f4f5;
      // color: #909399;
      margin: 5px;
      padding: 5px;
      border-radius: 3px;
    }
  }
  .slot-item-text {
    width: 90%;
  }

  .content {
    margin-top: 10px;
    padding: 8px;
    background-color: #fff;
  }

  .content-title {
    font-weight: 600;
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #cacccf;
  }

  .item-content {
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .item-end {
    display: flex;
    align-items: end;
    justify-content: end;
  }

  .item-col {
    justify-content: end;
  }

  .time-range-item {
    margin: 10px;
  }
</style>