feat: 移动端周日报可编辑

client_h5/src/pages/myLogs/Daily/index.vue

@@ -24,7 +24,12 @@
     <div class="title">接收人</div>
     <SelectUser v-model="formData.receiveUserIds" />
     <div class="blank-line"></div>
-    <div class="send-btn-group">
+    <div class="send-btn-group" v-if="formData.isUpdate">
+      <van-button type="primary" block @click="onSubmit(false)"
+        >更新</van-button
+      >
+    </div>
+    <div class="send-btn-group" v-else>
       <van-button type="success" block class="send-btn" @click="onSubmit(true)"
         >暂存</van-button
       >
@@ -39,7 +44,7 @@
  * @description 日志
  */
 import moment from "moment";
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import { showSuccessToast, showToast } from "vant";
 import SelectUser from "@/components/UserSelect.vue";
 import ProjectList from "../components/ProjectList.vue";
@@ -59,6 +64,7 @@ interface FormData {
   reportMonth: string | number; // 月
   reportWeek: string | number; // 周
   reportDay: string | number; // 本周第几天
+  isUpdate?: boolean; // 是否是更新
 }
 
 // 页面数据
@@ -100,15 +106,27 @@ onMounted(async () => {
   await getIsWorkDays();
 });
 
-// 在退出前调用一下暂存
-onBeforeRouteLeave((ev: any) => {
-  // 如果是千万详情，则不做处理
-  if (ev.name == "LogsDetail") return;
-  // 如果日志内容不为空则触发暂存，否则直接退出
-  if (formData.reportContent?.length > 0) {
-    onSubmit(true, true);
+// 在退出前调用一下暂存（做好实时暂存后就不需要退出暂存了）
+// onBeforeRouteLeave((ev: any) => {
+//   // 如果是千万详情，则不做处理
+//   if (ev.name == "LogsDetail") return;
+//   // 如果日志内容不为空则触发暂存，否则直接退出
+//   if (formData.reportContent?.length > 0) {
+//     onSubmit(true, true);
+//   }
+// });
+
+// 在改动工作量的时候实时暂存
+watch(
+  () => formData.reportContent,
+  (newData, oldData) => {
+    // 如果是更新，则不进行实时暂存
+    if (formData.isUpdate) return;
+    if (newData?.length > 0 && oldData?.length > 0) {
+      onSubmit(true, true);
+    }
   }
-});
+);
 
 // 回填暂存数据
 const receiveData = (dailyDetail: any) => {
@@ -116,6 +134,9 @@ const receiveData = (dailyDetail: any) => {
   formData.reportYear = dailyDetail.reportYear;
   formData.reportMonth = dailyDetail.reportMonth;
   formData.reportWeek = dailyDetail.reportWeek;
+  if (dailyDetail.isUpdate) {
+    formData.isUpdate = dailyDetail.isUpdate;
+  }
   today.value = moment(dailyDetail.reportStartDate).format("YYYY-MM-DD");
   // 加个定时器回填接收人和工时
   const timer = setTimeout(() => {

client_h5/src/pages/myLogs/Weekly/index.vue

@@ -30,7 +30,12 @@
     <div class="title">接收人</div>
     <SelectUser v-model="formData.receiveUserIds" />
     <div class="blank-line"></div>
-    <div class="send-btn-group">
+    <div class="send-btn-group" v-if="formData.isUpdate">
+      <van-button type="primary" block @click="onSubmit(false)"
+        >更新</van-button
+      >
+    </div>
+    <div class="send-btn-group" v-else>
       <van-button type="success" block class="send-btn" @click="onSubmit(true)"
         >暂存</van-button
       >
@@ -45,7 +50,7 @@
  * @description 周报
  */
 import moment from "moment";
-import { reactive } from "vue";
+import { reactive, watch } from "vue";
 import { showSuccessToast, showToast } from "vant";
 import SelectUser from "@/components/UserSelect.vue";
 import ProjectList from "../components/ProjectList.vue";
@@ -65,6 +70,7 @@ interface FormData {
   reportYear: string | number; // 年
   reportMonth: string | number; // 月
   reportWeek: string | number; // 周
+  isUpdate?: boolean; // 是否是更新
 }
 const defWeek = () => {
   if (moment().day() == 0) {
@@ -127,15 +133,27 @@ onMounted(async () => {
   formData.receiveUserIds = receiveUser;
 });
 
-// 在退出前调用一下暂存
-onBeforeRouteLeave((ev: any) => {
-  // 如果是千万详情，则不做处理
-  if (ev.name == "LogsDetail") return;
-  // 如果日志内容不为空则触发暂存，否则直接退出
-  if (formData.reportContent?.length > 0) {
-    onSubmit(true, true);
+// 在退出前调用一下暂存（做好实时暂存后就不需要退出暂存了）
+// onBeforeRouteLeave((ev: any) => {
+//   // 如果是前往详情，则不做处理
+//   if (ev.name == "LogsDetail") return;
+//   // 如果日志内容不为空则触发暂存，否则直接退出
+//   if (formData.reportContent?.length > 0) {
+//     onSubmit(true, true);
+//   }
+// });
+
+// 在改动工作量的时候实时暂存
+watch(
+  () => formData.reportContent,
+  (newData, oldData) => {
+    // 如果是更新，则不进行实时暂存
+    if (formData.isUpdate) return;
+    if (newData?.length > 0 && oldData?.length > 0) {
+      onSubmit(true, true);
+    }
   }
-});
+);
 
 // 回填暂存数据
 const receiveData = (weekDetail: any) => {
@@ -143,6 +161,9 @@ const receiveData = (weekDetail: any) => {
   formData.reportYear = weekDetail.reportYear;
   formData.reportMonth = weekDetail.reportMonth;
   formData.reportWeek = weekDetail.reportWeek;
+  if (weekDetail.isUpdate) {
+    formData.isUpdate = weekDetail.isUpdate;
+  }
   thisWeek.value = `${moment(weekDetail.reportStartDate).format(
     "YYYY/MM/DD"
   )} ~ ${moment(weekDetail.reportEndDate).format("YYYY/MM/DD")}`;

client_h5/src/pages/myLogs/components/LogDetail.vue

@@ -95,6 +95,11 @@
         </template>
       </van-field>
     </div>
+    <van-floating-bubble
+      v-model:offset="offset"
+      icon="edit"
+      @click="goToEditPage"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -117,6 +122,9 @@ onMounted(() => {
   initCommentList();
 });
 
+// 编辑气泡的位置
+const offset = ref({ y: 100 });
+
 // 页面标题
 const pageTitle = ref({
   type: "daily", // daily | weekly
@@ -132,6 +140,9 @@ const formData = reactive<FormData>({
   receiveNames: [],
 });
 
+// 日志的详情（用于在回填时候进行编辑）
+const logDetail = ref<any>({});
+
 // 初始化日志数据
 const initData = async () => {
   const reportId: any = route.query?.id ?? "";
@@ -139,7 +150,7 @@ const initData = async () => {
     ? JSON.parse(route.query.detail as string)
     : null;
   const result = reportDetail ?? (await http.getLogDetail(reportId));
-
+  logDetail.value = result;
   formData.reportContent = result.reportContent ?? "";
   formData.workloadList = result.workload ?? [];
   formData.receiveNames = result.receiveNames ?? [];
@@ -260,6 +271,21 @@ const submitComment = async (content?: string) => {
     });
   }
 };
+// 跳转到编辑页面
+const { push } = useRouter();
+const goToEditPage = () => {
+  const goPath = logDetail.value.reportType == "weekly" ? "/weekly" : "/daily";
+  push({
+    path: goPath,
+    query: {
+      id: logDetail.value.id,
+      detail: JSON.stringify({
+        ...logDetail.value,
+        isUpdate: true,
+      }),
+    },
+  });
+};
 </script>
 <style lang="scss" scoped>
 @import "../page.scss";