日志完成

src/views/worklog/components/leftMonth.vue

@@ -2,13 +2,14 @@
   <div class="leftBox">
     <div class="topBox">
       <el-date-picker
-        v-model="selectedDate"
+        v-model="selectMonth"
         type="month"
         format="yyyy年MM月"
         :clearable="false"
         style="margin-bottom: 10px; width: 150px"
         @change="changeMonth"
         prefix-icon="false"
+        value-format="yyyy-MM-dd"
       />
       <div>
         <i
@@ -24,7 +25,7 @@
       </div>
     </div>
 
-    <el-calendar v-model="selectedDate">
+    <el-calendar v-model="selectMonthValue">
       <template #dateCell="{ data }">
         <div
           :key="data.day"
@@ -33,6 +34,9 @@
           :class="{
             dayBox: true,
             disabled: isOverDay(data.day),
+            hasLog: calendarList.filter(
+              (ele) => ele.date == data.day + ' 00:00:00' && ele.state != -1
+            ).length,
           }"
         >
           {{ data.day.split("-")[2] }}
@@ -49,23 +53,36 @@ export default {
   name: "LeftMonth",
   data() {
     return {
-      selectedDate: this.moment(new Date()).format("YYYY-MM-DD"),
+      selectMonth: this.moment().format("YYYY-MM"),
-      nowDay: this.moment(new Date()).format("YYYY-MM-DD"),
+      nowDay: this.moment().format("YYYY-MM-DD 23:59:59"),
+      userId: this.$store.state.user.id,
+      calendarList: [],
+      selectDay:
+        this.moment().date() > 10
+          ? "0" + this.moment().date()
+          : this.moment().date(),
+      selectMonthValue: this.moment().format("YYYY-MM-DD"),
     };
   },
   methods: {
-    changeMonth() {},
     preMonth() {
-      this.selectedDate = this.moment(this.selectedDate)
+      this.selectDay = "01";
+      this.selectMonth = this.moment(this.selectMonth)
         .subtract(1, "months")
-        .format("YYYY-MM-DD");
+        .format(`YYYY-MM-${this.selectDay}`);
+      this.changeMonth();
     },
     nextMonth() {
-      this.selectedDate = this.moment(this.selectedDate)
+      this.selectDay = "01";
+      this.selectMonth = this.moment(this.selectMonth)
         .add(1, "months")
-        .format("YYYY-MM-DD");
+        .format(`YYYY-MM-${this.selectDay}`);
+      this.changeMonth();
     },
     searchLog(data, overDay) {
+      let checkMonth = this.moment(data.day).format("YYYY-MM");
+      let selectMonth = this.moment(this.selectMonth).format("YYYY-MM");
+
       this.$nextTick(() => {
         if (overDay) {
           this.$message({
@@ -74,15 +91,64 @@ export default {
           });
           this.$emit("setDisableTable", true);
         } else {
-          this.$emit("setDisableTable", false);
+          this.selectDay = data.day.split("-")[2];
+          if (selectMonth !== checkMonth) {
+            this.selectMonth = data.day;
+            this.getLogMonth();
+          }
           this.$emit("searchDay", data.day + " 00:00:00");
+          this.$emit("setDisableTable", false);
         }
       });
     },
     isOverDay(data) {
       return new Date(data).getTime() > new Date(this.nowDay).getTime();
     },
-  }
+    getLogMonth() {
+      if (this.$route.query.userId) {
+        this.userId = this.$route.query.userId;
+      }
+      let start = this.moment(this.selectMonth)
+        .startOf("month")
+        .format(`YYYY-MM-DD 00:00:00`);
+      let end = this.moment(this.selectMonth)
+        .endOf("month")
+        .format("YYYY-MM-DD 23:59:59");
+
+      workLogApi
+        .getLogData({
+          startDate: start,
+          endDate: end,
+          userId: this.userId,
+        })
+        .then((res) => {
+          this.calendarList = res.data;
+        });
+    },
+    changeMonth() {
+      this.$nextTick(() => {
+        if (this.selectMonth == this.selectMonthValue) return;
+        this.selectDay = "01";
+        this.selectMonth = this.moment(this.selectMonth).format(
+          `YYYY-MM-${this.selectDay}`
+        );
+        this.selectMonthValue = this.selectMonth;
+        this.searchLog(
+          { day: this.selectMonth },
+          this.isOverDay(this.selectMonth)
+        );
+        this.searchLog(
+          { day: this.selectMonth },
+          this.isOverDay(this.selectMonth)
+        );
+        this.getLogMonth();
+      });
+    },
+  },
+  watch: {},
+  mounted() {
+    this.getLogMonth();
+  },
 };
 </script>
 
@@ -110,6 +176,11 @@ export default {
     }
   }
   tbody {
+    .hasLog {
+      background: #a2c6f2;
+      border-radius: 50%;
+      color: #fff;
+    }
     td {
       border: none;
       padding: 10px 0;
@@ -129,7 +200,7 @@ export default {
       &.prev {
         color: #333 !important;
       }
-      &.is-selected .el-calendar-day {
+      &.is-selected .dayBox:not(.disabled) {
         border-radius: 50% !important;
         background-color: #4096ff;
         color: #fff;

src/views/worklog/components/rightTable.vue

@@ -3,7 +3,9 @@
     <div class="topBox" v-show="!disableTable">
       <div>
         <div class="topTitle">当日日志</div>
-        <div class="topText">总计填报工时:<span>1</span>天</div>
+        <div class="topText">
+          总计填报工时:<span> {{ totalWorkTime }} </span>天
+        </div>
       </div>
       <div>
         <el-button type="primary" @click="handleAdd">
@@ -77,7 +79,7 @@
                 v-model="scope.row.demandId"
                 placeholder="进行中且时间匹配的需求"
                 class="filter-select"
-                @change="openContent"
+                @change="openContent(scope.row)"
                 ref="demandSelectRef"
               >
                 <el-option
@@ -94,13 +96,12 @@
       </el-table-column>
       <el-table-column label="工作内容" prop="workContent">
         <template #default="scope">
-          <div @click="openContent">
+          <div @click="openContent(scope.row)">
             <el-popover
-              v-if="scope.row.edit"
               placement="bottom"
               width="400"
               trigger="click"
-              v-model="showContent"
+              v-model="scope.row.showContent"
               :key="scope.row.loggerId"
             >
               <el-input
@@ -111,6 +112,12 @@
                 :disabled="!scope.row.edit"
               >
               </el-input>
+              <div style="margin-top: 10px; text-align: right" v-show="!disableTable">
+                <el-button type="primary" @click="saveContent(scope.row, 1)"
+                  >确认</el-button
+                >
+                <el-button @click="saveContent(scope.row, 0)">取消</el-button>
+              </div>
               <div slot="reference">
                 <div
                   style="cursor: pointer"
@@ -123,17 +130,6 @@
                 </div>
               </div>
             </el-popover>
-
-            <div
-              v-show="!scope.row.edit"
-              style="cursor: pointer"
-              :class="{
-                contentText: true,
-                noneText: !scope.row.workContent,
-              }"
-            >
-              {{ scope.row.workContent || "请输入" }}
-            </div>
           </div>
         </template>
       </el-table-column>
@@ -163,7 +159,7 @@
       </el-table-column>
       <el-table-column label="操作" width="120">
         <template #default="scope">
-          <div>
+          <div v-show="!disableTable">
             <el-button type="text" @click="handleEdit(scope.row)">
               {{ scope.row.loggerId && !scope.row.edit ? "编辑" : "确认" }}
             </el-button>
@@ -207,7 +203,7 @@ export default {
       demandList: [],
       hasTimeLong: 0,
       workTimeList: [],
-      showContent: false,
+      oldContent: "",
     };
   },
   methods: {
@@ -229,6 +225,7 @@ export default {
         .then((res) => {
           this.tableData = res.data.map((ele) => {
             ele.edit = false;
+            ele.showContent = false;
             return ele;
           });
         });
@@ -247,6 +244,7 @@ export default {
                 message: "删除成功!",
               });
               this.getLogList();
+              this.$emit("changeCaleder");
             });
           })
           .catch(() => {});
@@ -267,10 +265,14 @@ export default {
       }
       this.versionList = [];
       this.demandList = [];
+      this.oldContent = "";
       this.getDayTime("add");
     },
     async handleEdit(row) {
-      if (this.tableData.filter((ele) => ele.edit).length) {
+      if (
+        this.tableData.filter((ele) => ele.edit && ele.loggerId != row.loggerId)
+          .length
+      ) {
         this.$message({
           message: "请先保存未完成数据",
           type: "warning",
@@ -299,12 +301,14 @@ export default {
           await workLogApi.editLog(param);
         } else {
           await workLogApi.addLog(param);
+          this.$emit("changeCaleder");
         }
         this.$modal.msgSuccess("操作成功");
         row.edit = false;
         this.getLogList();
       } else {
         row.edit = true;
+        this.oldContent = row.workContent;
         this.getDayTime("edit", row);
         this.getVersionList(row.projectId, row, true);
       }
@@ -368,8 +372,6 @@ export default {
     },
     async getDemandList(val, row, isOpen) {
       if (!isOpen) row.demandId = "";
-      console.log(222, this.versionList);
-
       if (this.versionList.find((ele) => ele.id == val)) {
         this.demandList = this.versionList.find(
           (ele) => ele.id == val
@@ -379,15 +381,25 @@ export default {
       }
       if (!isOpen) this.$refs.demandSelectRef.toggleMenu();
     },
-    openContent() {
+    openContent(row) {
-      console.log(123);
+      row.showContent = true;
-
+    },
-      this.showContent = true;
+    saveContent(row, type) {
+      this.$nextTick(() => {
+        if (type == 0) {
+          row.workContent = this.oldContent;
+        } else {
+          this.oldContent = row.workContent;
+        }
+        row.showContent = false;
+      });
     },
   },
   watch: {
     $route(to, from) {
-      if (!this.$route.query.userId) {
+      if (this.$route.query.userId) {
+        console.log(1234444);
+
         this.init();
       }
     },
@@ -411,6 +423,16 @@ export default {
           ele.projectState == 1
       );
     },
+    totalWorkTime() {
+      return (
+        this.tableData
+          .map((ele) => Number(ele.workTime))
+          .reduce((total, now) => {
+            console.log(now, total);
+            return now * 10 + total;
+          }, 0) / 10
+      ).toFixed(1);
+    },
   },
   mounted() {
     this.init();
@@ -450,6 +472,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  word-break: break-all;
 }
 .noneText {
   color: #999;

src/views/worklog/worklog.vue

@@ -13,6 +13,7 @@
       ref="rightRef"
       :selectDay="selectDay"
       :disableTable="disableTable"
+      @changeCaleder="changeCaleder"
     />
   </div>
 </template>
@@ -32,18 +33,31 @@ export default {
     return {
       selectDay: "",
       disableTable: false,
+      userId: this.$store.state.user.id,
     };
   },
   methods: {
+    init() {
+      this.selectDay = this.moment().format("YYYY-MM-DD 00:00:00");
+      if (this.$route.query.userId && this.userId != this.$route.query.userId) {
+        this.setDisableTable(false);
+      }
+    },
     searchDay(data) {
       this.selectDay = data;
     },
     setDisableTable(data) {
+      if (this.$route.query.userId && this.userId != this.$route.query.userId) {
+        data = true;
+      }
       this.disableTable = data;
     },
+    changeCaleder() {
+      this.$refs.leftRef.getLogMonth();
+    },
   },
   mounted() {
-    this.selectDay = this.moment().format("YYYY-MM-DD 00:00:00");
+    this.init();
   },
 };
 </script>