🦄 refactor(瑞都日报):

pages/ruiDu/compontents/report-form.vue

@@ -308,11 +308,16 @@
     // 附件
     form.attachments = props.reportData.attachments || [];
 
-    form.reportFuels = (
-      (props.reportData.status === 0 ? props.reportData.reportFuels : props.reportData.reportedFuels) || []
-    ).map(v => ({
+    // 提取变量，方便阅读
+    const list1 = props.reportData.reportFuels;
+    const list2 = props.reportData.reportedFuels;
+
+    const validList = list1?.length > 0 ? list1 : list2?.length > 0 ? list2 : [];
+
+    form.reportFuels = validList.map(v => ({
       ...v,
-      customFuel: Number(Number(v.zhbdFuel ?? 0).toFixed(2)),
+      // 这里保持你原有的数值处理逻辑
+      customFuel: Number(Number(props.formDisable ? v.customFuel ?? 0 : v.customFuel ?? v.zhbdFuel ?? 0).toFixed(2)),
     }));
 
     steps.value = (props.reportData.taskProgresses ?? []).map(v => ({ title: v.rdStatusLabel, desc: v.createTime }));
@@ -479,10 +484,12 @@
     // 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;
@@ -726,21 +733,18 @@
     }
   };
 
-  // 执行初始化
-  initDailyFuel();
-
   // --- 4. 监听器 (关键修改) ---
 
   // 监听列表：【注意】这里去掉了 immediate: true
   // 因为初始化我们已经在上面手动 initDailyFuel() 里做过了
   // 现在只监听用户后续的“修改”操作
-  watch(
-    () => form.reportFuels,
-    () => {
-      handleListChange();
-    },
-    { deep: true } // 只有 deep，没有 immediate
-  );
+  // watch(
+  //   () => form.reportFuels,
+  //   () => {
+  //     handleListChange();
+  //   },
+  //   { deep: true } // 只有 deep，没有 immediate
+  // );
 
   // 监听 dailyFuel
   watch(
@@ -939,7 +943,7 @@
           </view>
           <view class="file-list item-col" v-else>
             <view v-for="(file, index) in form.attachments" :key="index">
-              {{ file.filename }}
+              <span>{{ file.filename }}</span>
               <!-- <button @click="downloadFile(file)" type="primary" size="mini" class="file-picker-btn">下载文件</button> -->
             </view>
           </view>
@@ -1089,7 +1093,8 @@
             :styles="{ disableColor: '#fff' }"
             :placeholder="inputPlaceholder"
             :disabled="formDisable"
-            v-model="fuel.customFuel" />
+            v-model="fuel.customFuel"
+            @input="handleListChange" />
         </uni-forms-item>
       </div>
     </uni-forms>
@@ -1188,7 +1193,7 @@
     flex-direction: column;
     align-items: end;
     justify-content: end;
-    max-width: 300px;
+    max-width: 100%;
 
     & > view {
       width: 100%;
@@ -1197,6 +1202,18 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+
+      & > span {
+        flex: 1;
+        word-break: break-all;
+        overflow-wrap: anywhere;
+        margin-right: 10px;
+      }
+
+      & > .file-picker-btn {
+        flex-shrink: 0;
+        margin-left: 0;
+      }
     }
   }
 

pages/ruiDu/index.vue

@@ -9,18 +9,12 @@
             v-model="orderName"
             :styles="inputStyles"
             :placeholderStyle="placeholderStyle"
-            :placeholder="$t('operation.searchText')"
-          >
+            :placeholder="$t('operation.searchText')">
           </uni-easyinput>
         </uni-col>
         <uni-col :span="5" class="flex-row justify-end">
-          <button
-            class="mini-btn"
-            type="primary"
-            size="mini"
-            @click="searchList"
-          >
-            {{ $t("operation.search") }}
+          <button class="mini-btn" type="primary" size="mini" @click="searchList">
+            {{ $t('operation.search') }}
           </button>
         </uni-col>
       </uni-row>
@@ -31,87 +25,63 @@
           class="item-module flex-row align-center justify-between"
           :class="{
             tobeFilled: item.status == 0,
-          }"
-        >
+          }">
           <!-- 创建时间 -->
           <view class="module-name">
-            {{ item.createTime ? formatDate(item.createTime) : "" }}
+            {{ item.createTime ? formatDate(item.createTime) : '' }}
           </view>
           <!-- 工单状态 -->
           <view
             class="module-status"
             :class="{
               pending: item.status == 0, //待填写
-            }"
-          >
+            }">
             {{ fillStatusDict[item.status] }}
           </view>
         </view>
         <view class="item-content">
           <!-- 带班干部 -->
           <view class="item-title flex-row">
-            <span class="item-title-width"
-              >{{ $t("ruiDu.shiftLeader") }}:</span
-            >
+            <span class="item-title-width">{{ $t('ruiDu.shiftLeader') }}:</span>
             <span>{{ item.responsiblePersonNames }}</span>
           </view>
           <!-- 日报名称 -->
           <view class="item-title flex-row">
-            <span class="item-title-width"
-              >{{ $t("ruiDu.reportName") }}:</span
-            >
+            <span class="item-title-width">{{ $t('ruiDu.reportName') }}:</span>
             <span>{{ item.reportName }}</span>
           </view>
           <!-- 项目 -->
           <view class="item-title flex-row">
-            <span class="item-title-width"
-              >{{ $t("ruiDu.project") }}:</span
-            >
+            <span class="item-title-width">{{ $t('ruiDu.project') }}:</span>
             <span>{{ item.contractName }}</span>
           </view>
           <!-- 任务 -->
           <view class="item-title flex-row">
-            <span class="item-title-width"
-              >{{ $t("ruiDu.task") }}:</span
-            >
+            <span class="item-title-width">{{ $t('ruiDu.task') }}:</span>
             <span>{{ item.taskName }}</span>
           </view>
 
           <!-- 创建时间 -->
           <view class="item-title flex-row">
-            <span class="item-title-width">{{ $t("operation.createTime") }}:</span>
-            <span>{{
-              item.createTime ? formatTime(item.createTime) : ""
-            }}</span>
+            <span class="item-title-width">{{ $t('operation.createTime') }}:</span>
+            <span>{{ item.createTime ? formatTime(item.createTime) : '' }}</span>
           </view>
           <!-- 填写时间 -->
           <view class="item-title flex-row">
-            <span class="item-title-width"
-              >{{ $t("operation.fillTime") }}:</span
-            >
-            <span>{{
-              item.fillTime ? formatTime(item.fillTime) : ""
-            }}</span>
+            <span class="item-title-width">{{ $t('operation.fillTime') }}:</span>
+            <span>{{ item.fillTime ? formatTime(item.fillTime) : '' }}</span>
           </view>
-          
         </view>
         <view class="item-btn flex-row align-center justify-end">
           <!--  状态：0(待填写),1(已完成),2(填写中),3(忽略) -->
 
           <!-- 查看 -->
-          <button
-            type="primary"
-            plain="true"
-            @click="navigatorDetail(item)"
-          >
-            {{ $t("operation.view") }}
+          <button type="primary" plain="true" @click="navigatorDetail(item)">
+            {{ $t('operation.view') }}
           </button>
           <!-- 填写 -->
-          <button
-            type="primary"
-            @click="navigatorEdit(item)"
-          >
-            {{ $t("operation.fill") }}
+          <button v-show="item.status === 0" type="primary" @click="navigatorEdit(item)">
+            {{ $t('operation.fill') }}
           </button>
         </view>
       </view>
@@ -120,106 +90,100 @@
 </template>
 
 <script setup>
-import { ref, reactive, nextTick } from "vue";
-import { onShow } from "@dcloudio/uni-app";
-import dayjs from "dayjs";
-import {
-  getRuiDuReportPage,
-} from "@/api/ruiDu";
-import { getUserId, getDeptId } from "@/utils/auth.js";
-import { useDataDictStore } from "@/store/modules/dataDict";
+  import { ref, reactive, nextTick } from 'vue';
+  import { onShow } from '@dcloudio/uni-app';
+  import dayjs from 'dayjs';
+  import { getRuiDuReportPage } from '@/api/ruiDu';
+  import { useDataDictStore } from '@/store/modules/dataDict';
 
-// 获取字典项
-const { getStrDictOptions } = useDataDictStore();
-// 填写状态
-const fillStatusDict = reactive({});
-getStrDictOptions("operation_fill_order_status").map((item) => {
-  fillStatusDict[item.value] = item.label;
-});
-console.log("🚀 ~ getDataDictList ~ fillStatusDict:", fillStatusDict);
+  // 获取字典项
+  const { getStrDictOptions } = useDataDictStore();
+  // 填写状态
+  const fillStatusDict = reactive({});
+  getStrDictOptions('operation_fill_order_status').map(item => {
+    fillStatusDict[item.value] = item.label;
+  });
+  console.log('🚀 ~ getDataDictList ~ fillStatusDict:', fillStatusDict);
 
-const orderName = ref("");
-const placeholderStyle = ref("color:#797979;font-weight:500;font-size:16px");
-const inputStyles = reactive({
-  backgroundColor: "#FFFFFF",
-  color: "#797979",
-});
-const paging = ref(null);
-// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
-const dataList = ref([]);
+  const orderName = ref('');
+  const placeholderStyle = ref('color:#797979;font-weight:500;font-size:16px');
+  const inputStyles = reactive({
+    backgroundColor: '#FFFFFF',
+    color: '#797979',
+  });
+  const paging = ref(null);
+  // v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
+  const dataList = ref([]);
 
-// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
-const queryList = (pageNo, pageSize) => {
-  // 此处请求仅为演示，请替换为自己项目中的请求
-  getRuiDuReportPage({
-    pageNo,
-    pageSize,
-  })
-    .then((res) => {
-      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
-      paging.value.complete(res.data.list);
+  // @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
+  const queryList = (pageNo, pageSize) => {
+    // 此处请求仅为演示，请替换为自己项目中的请求
+    getRuiDuReportPage({
+      pageNo,
+      pageSize,
     })
-    .catch((res) => {
-      // 如果请求失败写paging.value.complete(false);
-      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
-      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
-      paging.value.complete(false);
+      .then(res => {
+        // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
+        paging.value.complete(res.data.list);
+      })
+      .catch(res => {
+        // 如果请求失败写paging.value.complete(false);
+        // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
+        // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
+        paging.value.complete(false);
+      });
+  };
+  const searchList = () => {
+    paging.value.reload();
+  };
+  const navigatorDetail = item => {
+    console.log('item', item);
+    uni.navigateTo({
+      url: '/pages/ruiDu/detail?id=' + item.id,
     });
-};
-const searchList = () => {
-  paging.value.reload();
-};
-const navigatorDetail = (item) => {
-  console.log("item", item);
-  uni.navigateTo({
-    url:
-      "/pages/ruiDu/detail?id=" + item.id,
-  });
-};
-const navigatorEdit = (item) => {
-  console.log("item", item);
-  uni.navigateTo({
-    url:
-      "/pages/ruiDu/edit?id=" + item.id,
-  });
-};
-const formatDate = (time) => {
-  return dayjs(time).format("YYYY-MM-DD");
-};
-const formatTime = (time) => {
-  return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
-};
-
+  };
+  const navigatorEdit = item => {
+    console.log('item', item);
+    uni.navigateTo({
+      url: '/pages/ruiDu/edit?id=' + item.id,
+    });
+  };
+  const formatDate = time => {
+    return dayjs(time).format('YYYY-MM-DD');
+  };
+  const formatTime = time => {
+    return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
+  };
 
-onShow(() => {
-  nextTick(() => {
-    searchList();
+  onShow(() => {
+    nextTick(() => {
+      searchList();
+    });
   });
-});
 </script>
 
 <style lang="scss" scoped>
-@import "@/style/work-order.scss";
-
-.search-row {
-  height: 35px;
-  background: #f3f5f9;
+  @import '@/style/work-order.scss';
 
-  .mini-btn {
+  .search-row {
     height: 35px;
-    line-height: 35px;
-    width: 100%;
-    margin-left: 8px;
+    background: #f3f5f9;
+
+    .mini-btn {
+      height: 35px;
+      line-height: 35px;
+      width: 100%;
+      margin-left: 8px;
+    }
   }
-}
 
-.item {
-  width: 100%;
-  // height: 245px;
-  min-height: 245px;
-  // max-height: fit-content;
-  background: #ffffff;
-  border-radius: 6px;
-  margin-top: 10px;
-}
+  .item {
+    width: 100%;
+    // height: 245px;
+    min-height: 245px;
+    // max-height: fit-content;
+    background: #ffffff;
+    border-radius: 6px;
+    margin-top: 10px;
+  }
 </style>