日志完成
rdpnr_hemingxia
parent
da50ed138f
commit
cf743c0dd6
|
|
@ -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"),
|
||||
nowDay: this.moment(new Date()).format("YYYY-MM-DD"),
|
||||
selectMonth: this.moment().format("YYYY-MM"),
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
console.log(123);
|
||||
|
||||
this.showContent = true;
|
||||
openContent(row) {
|
||||
row.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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue