index.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <div class="container">
  3. <div class="timer">
  4. <van-cell
  5. title="周报时间"
  6. :value="thisWeek"
  7. @click="calendarShow = true"
  8. />
  9. <!-- <van-calendar
  10. v-model:show="calendarShow"
  11. @confirm="onConfirm"
  12. type="range"
  13. :min-date="minDate"
  14. :max-date="maxDate"
  15. /> -->
  16. </div>
  17. <div class="title">本周工作</div>
  18. <van-field
  19. v-model="formData.reportContent"
  20. rows="5"
  21. autosize
  22. type="textarea"
  23. placeholder=""
  24. />
  25. <div class="title">
  26. 工作量分配 {{ totalTime ? `(总耗时${totalTime}小时)` : "" }}
  27. </div>
  28. <ProjectList type="weekly" :onChange="projectChange" />
  29. <div class="title">接收人</div>
  30. <SelectUser v-model="formData.receiveUserIds" />
  31. <div class="blank-line"></div>
  32. <van-button round type="primary" block class="send-btn" @click="onSubmit"
  33. >发送</van-button
  34. >
  35. </div>
  36. </template>
  37. <script lang="ts" setup>
  38. /**
  39. * @description 周报
  40. */
  41. import moment from "moment";
  42. import { reactive } from "vue";
  43. import { showSuccessToast, showToast } from "vant";
  44. import SelectUser from "@/components/UserSelect.vue";
  45. import ProjectList from "../components/ProjectList.vue";
  46. import { getUserInfo } from "@/utils/tools";
  47. import { http } from "../http";
  48. import { IReport } from "../interface";
  49. import { onSubmitCheck } from "../service";
  50. interface FormData {
  51. reportContent: string; // 内容
  52. weeklyWorkloadList: {
  53. projectId: string;
  54. workTime: number;
  55. }[]; // 工作量分配
  56. receiveUserIds: string[]; // 接收人
  57. reportYear: string | number; // 年
  58. reportMonth: string | number; // 月
  59. reportWeek: string | number; // 周
  60. }
  61. // 页面数据
  62. const thisWeek = ref(
  63. `${moment().startOf("week").add(1, "day").format("YYYY/MM/DD")} ~ ${moment()
  64. .endOf("week")
  65. .add(1, "day")
  66. .format("YYYY/MM/DD")}`
  67. );
  68. const formData = reactive<FormData>({
  69. reportContent: "",
  70. weeklyWorkloadList: [],
  71. receiveUserIds: [],
  72. reportYear: moment().format("YYYY"),
  73. reportMonth: moment().format("MM"),
  74. reportWeek: 0,
  75. });
  76. const route = useRoute();
  77. onMounted(async () => {
  78. // 查看有没有传日期进来
  79. const query: any = route.query;
  80. if (query.startDate && query.endDate) {
  81. thisWeek.value = `${moment(query.startDate).format(
  82. "YYYY/MM/DD"
  83. )} ~ ${moment(query.endDate).format("YYYY/MM/DD")}`;
  84. }
  85. // 检查一下今天是否已经填了
  86. await isFillLog();
  87. // 回填历史接收人
  88. const receiveUser = await http.getReceiveUser();
  89. formData.receiveUserIds = receiveUser;
  90. // 获取当日详情
  91. await getIsWorkDays();
  92. });
  93. // 判断一下本周是否已经填了,如果是填了的就跳转到详情页
  94. const isFillLog = async () => {
  95. const date = thisWeek.value.split(" ~ ");
  96. const searchList = await http.getMonthLogList(
  97. "weekly",
  98. moment(date[1]).format("YYYY"),
  99. moment(date[1]).format("M")
  100. );
  101. const searchLog = searchList.find(
  102. (item: any) => item.reportEndDate == moment(date[1]).format("YYYY-MM-DD")
  103. );
  104. if (searchLog) {
  105. push(`/logsDetail?id=${searchLog.id}`);
  106. }
  107. };
  108. // 日历
  109. const calendarShow = ref(false);
  110. // const onConfirm = async (values: any) => {
  111. // const [start, end] = values;
  112. // thisWeek.value = `${moment(start).format("YYYY/MM/DD")} ~ ${moment(
  113. // end
  114. // ).format("YYYY/MM/DD")}`;
  115. // calendarShow.value = false;
  116. // // 获取当日详情
  117. // await getIsWorkDays();
  118. // };
  119. // 可选择的最小日期,一个月之前,最大日期:今天
  120. // const minDate = moment().subtract(2, "months").toDate();
  121. // const maxDate = moment().toDate();
  122. // 工作量改变
  123. const projectChange = (data: any) => {
  124. formData.weeklyWorkloadList = data;
  125. getTotalTime();
  126. };
  127. // 提交
  128. const { push } = useRouter();
  129. const onSubmit = async () => {
  130. const date = thisWeek.value.split(" ~ ");
  131. const userInfo = getUserInfo();
  132. const params: IReport = {
  133. ...formData,
  134. reportType: "weekly",
  135. userId: userInfo.id ?? "",
  136. deptId: userInfo.deptId ?? "",
  137. reportStartDate: moment(date[0]).valueOf(),
  138. reportEndDate: moment(date[1]).valueOf(),
  139. isTemp: false,
  140. };
  141. const submitCheck = onSubmitCheck(params);
  142. if (!submitCheck.success) {
  143. showToast({
  144. message: submitCheck.msg,
  145. position: "top",
  146. });
  147. return;
  148. }
  149. const result: any = await http.submitReport(params);
  150. if (result.msg == "success") {
  151. showSuccessToast("发送成功");
  152. push(`/logsDetail?id=${result.data}`);
  153. }
  154. };
  155. // 获取是否工作日
  156. const getIsWorkDays = async (date?: string) => {
  157. const searchDate = date?.split(" ~ ") ?? thisWeek.value.split(" ~ ");
  158. const startDate = moment(searchDate[1]).format("YYYY-MM-DD HH:mm:ss");
  159. const endDate = moment(searchDate[1]).format("YYYY-MM-DD HH:mm:ss");
  160. const workDays = await http.getWorkDayList(startDate, endDate);
  161. formData.reportYear = workDays[0].year;
  162. formData.reportMonth = workDays[0].month;
  163. formData.reportWeek = workDays[0].week;
  164. // return workDays[0];
  165. };
  166. // 计算总耗时
  167. const totalTime = ref(0);
  168. const getTotalTime = () => {
  169. let total = 0;
  170. formData.weeklyWorkloadList.forEach((item: any) => {
  171. total += item.workTime;
  172. });
  173. totalTime.value = total;
  174. };
  175. </script>
  176. <style lang="scss" scoped>
  177. @import "../page.scss";
  178. </style>