index.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <template>
  2. <div>
  3. <div class="mine">
  4. <!-- 表头月份 -->
  5. <div class="month">
  6. <div class="title">{{ month }}月排班</div>
  7. <div @click="schedulingDetails" class="btn" v-if="level == 10">
  8. 排班
  9. </div>
  10. <!-- v-if='level==10' -->
  11. </div>
  12. <!-- 日历 -->
  13. <el-calendar>
  14. <template slot="dateCell" slot-scope="{ date, data }">
  15. <div
  16. v-for="(item, index) in stateType(getDay(date), data)"
  17. :key="index"
  18. class="dateContent"
  19. :class="
  20. thisDay == getDay(date) ? 'today' : item.type == 4 ? 'color5' : ''
  21. "
  22. >
  23. <span
  24. class="date"
  25. :class="item.type == 4 && thisDay != getDay(date) ? 'color4' : ''"
  26. >{{ getDay(date) }}
  27. </span>
  28. <span
  29. class="type"
  30. :class="
  31. item.type == 1
  32. ? 'color1'
  33. : item.type == 2
  34. ? 'color2'
  35. : item.type == 4 && thisDay != getDay(date)
  36. ? 'color4'
  37. : item.type == 3
  38. ? 'color3'
  39. : 'color6'
  40. "
  41. >{{ typeList[item.type - 1] }}</span
  42. >
  43. </div>
  44. </template>
  45. </el-calendar>
  46. </div>
  47. </div>
  48. </template>
  49. <script>
  50. import api from "../../server/home";
  51. export default {
  52. data() {
  53. return {
  54. thisDay: "", //今天日期(日)
  55. stateList: [], //值班列表
  56. typeList: ["早班", "中班", "晚班", "休息", "离职"], //1是早班 2是中班 3是晚班 4是休息 5离职
  57. month: "",
  58. level: "", //等级权限
  59. };
  60. },
  61. methods: {
  62. // 标注今天日期
  63. getDay(date) {
  64. return date.getDate();
  65. },
  66. schedulingDetails() {
  67. this.$router.push("/scheduling/details");
  68. },
  69. // 获取排班列表
  70. getScheduling() {
  71. let now = new Date();
  72. let year = now.getFullYear();
  73. let month = now.getMonth() + 1;
  74. if (month < 10) {
  75. month = "0" + month;
  76. }
  77. let start_time = `${year}-${month}-01`;
  78. const enddate = new Date(year, month, 0);
  79. var end_time =
  80. enddate.getFullYear() +
  81. "-" +
  82. (enddate.getMonth() + 1) +
  83. "-" +
  84. enddate.getDate();
  85. let parems = {
  86. start_time: start_time,
  87. end_time: end_time,
  88. };
  89. api.getScheduling(parems).then((res) => {
  90. if (res.code == 200) {
  91. this.stateList = res.data;
  92. }
  93. });
  94. },
  95. // 筛选每天对应的排班数据
  96. stateType(date, data) {
  97. // 获取月份
  98. if (!data) {
  99. return;
  100. }
  101. let month = data.day.split("-")[1];
  102. return this.stateList.filter((item) => {
  103. if (date == item.day && month == this.month) {
  104. return item;
  105. }
  106. });
  107. },
  108. },
  109. created() {
  110. this.level = localStorage.getItem("level");
  111. let now = new Date();
  112. this.thisDay = now.getDate();
  113. this.month = now.getMonth() + 1;
  114. // 获取排班列表
  115. this.getScheduling();
  116. this.stateType();
  117. },
  118. };
  119. </script>
  120. <style lang='less' scoped>
  121. .mine {
  122. width: 857px;
  123. height: 504px;
  124. background-color: #ffffff;
  125. margin: auto auto;
  126. border-radius: 10px;
  127. // 表头月份样式
  128. .month {
  129. width: 857px;
  130. height: 80px;
  131. border-radius: 10px;
  132. border: 1px solid #fa7d22;
  133. font-size: 24px;
  134. font-family: PingFangSC-Semibold, PingFang SC;
  135. font-weight: 600;
  136. color: #fa7d22;
  137. text-align: center;
  138. line-height: 80px;
  139. display: flex;
  140. align-items: center;
  141. .title {
  142. margin-left: 385px;
  143. }
  144. .btn {
  145. font-weight: 400;
  146. width: 80px;
  147. line-height: 30px;
  148. height: 30px;
  149. background: #fa7d22;
  150. border-radius: 20px;
  151. color: #ffffff;
  152. font-size: 14px;
  153. margin-left: 285px;
  154. }
  155. }
  156. // 日历样式
  157. /deep/.el-calendar__header {
  158. display: none;
  159. }
  160. /deep/.el-calendar-day {
  161. text-align: center;
  162. color: #333333;
  163. border: none;
  164. }
  165. /deep/ thead {
  166. font-size: 20px;
  167. font-weight: 400;
  168. color: #333;
  169. }
  170. /deep/td.current {
  171. border: none;
  172. }
  173. /deep/td.next {
  174. pointer-events: none;
  175. border: none;
  176. .dateContent {
  177. color: #d4d4d4;
  178. }
  179. }
  180. /deep/td.prev {
  181. pointer-events: none;
  182. border: none;
  183. .dateContent {
  184. color: #d4d4d4 !important;
  185. }
  186. }
  187. .dateContent {
  188. display: flex;
  189. font-size: 20px;
  190. flex-direction: column;
  191. width: 60px;
  192. height: 60px;
  193. margin: auto auto;
  194. margin-top: 10px;
  195. border-radius: 8px;
  196. padding-top: 6px;
  197. box-sizing: border-box;
  198. .date {
  199. margin-top: 4px;
  200. }
  201. .type {
  202. font-size: 14px;
  203. margin-top: 4px;
  204. }
  205. }
  206. .today {
  207. border: 1px solid #fa7d22 !important;
  208. }
  209. /deep/tr.el-calendar-table__row:last-child {
  210. display: none;
  211. }
  212. .el-calendar {
  213. pointer-events: none;
  214. }
  215. }
  216. /deep/td.current {
  217. .color1 {
  218. color: #19d1ca; //早班
  219. }
  220. .color2 {
  221. color: #ffa5a5; //午班
  222. }
  223. .color3 {
  224. color: #4b5d8d; //晚班
  225. }
  226. .color4 {
  227. color: #ffffff; //休息
  228. }
  229. .color5 {
  230. background-color: #fa7d22;
  231. }
  232. .color6 {
  233. color: #999999; //离职
  234. }
  235. }
  236. </style>