index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  1. <template>
  2. <div>
  3. <!-- 头部添加查询排班=表 -->
  4. <div class="header">
  5. <div class="header-left">
  6. <div
  7. class="title"
  8. :class="activeClass == index ? 'titleActive' : ''"
  9. v-for="(item, index) in titleList"
  10. :key="index"
  11. @click="checkTitle(index)"
  12. >
  13. {{ item }}月排班表
  14. <i class="el-icon-close" @click="delTitle" v-if="index == 1"></i>
  15. </div>
  16. <div class="add" @click="addList"><i class="el-icon-plus"></i></div>
  17. </div>
  18. <div class="header-right">
  19. <div class="selectTime">
  20. <el-date-picker
  21. popper-class="mydatestyle"
  22. @change="selectTime"
  23. v-model="dateList"
  24. type="month"
  25. placeholder="查询时间"
  26. :editable="false"
  27. :clearable="false"
  28. :picker-options="pickerOptions"
  29. >
  30. <!-- :picker-options="pickerOptions" -->
  31. </el-date-picker>
  32. </div>
  33. <div @click="search" class="search">查询</div>
  34. </div>
  35. </div>
  36. <!-- 排班表 -->
  37. <div class="list">
  38. <el-table
  39. :data="tableData"
  40. @cell-click="handle"
  41. :cell-class-name="tableCellClassName"
  42. :row-class-name="overTime"
  43. height="550"
  44. >
  45. <el-table-column prop="date" label="日期" align="center" width="155">
  46. </el-table-column>
  47. <el-table-column
  48. v-for="(item, index) in nameList"
  49. :prop="'name' + index"
  50. :label="item.realname"
  51. align="center"
  52. width="155"
  53. :key="index"
  54. >
  55. <template slot-scope="scope">
  56. <el-dropdown
  57. @command="selectType"
  58. :disabled="disabled"
  59. trigger="click"
  60. >
  61. <div
  62. class="amend"
  63. :class="
  64. tableData[scope.row.index]['name' + index] == '早班'
  65. ? 'color1'
  66. : tableData[scope.row.index]['name' + index] == '中班'
  67. ? 'color2'
  68. : tableData[scope.row.index]['name' + index] == '晚班'
  69. ? 'color3'
  70. : tableData[scope.row.index]['name' + index] == '休息'
  71. ? 'color4'
  72. : 'color5'
  73. "
  74. >
  75. {{ tableData[scope.row.index]["name" + index] }}
  76. </div>
  77. <span v-if="false">{{ scope.row }}</span>
  78. <el-dropdown-menu slot="dropdown">
  79. <el-dropdown-item class="color1" command="早班"
  80. >早班</el-dropdown-item
  81. >
  82. <el-dropdown-item class="color2" command="中班"
  83. >中班</el-dropdown-item
  84. >
  85. <el-dropdown-item class="color3" command="晚班"
  86. >晚班</el-dropdown-item
  87. >
  88. <el-dropdown-item class="color4" command="休息"
  89. >休息</el-dropdown-item
  90. >
  91. <el-dropdown-item class="color5" command="离职"
  92. >离职</el-dropdown-item
  93. >
  94. </el-dropdown-menu>
  95. </el-dropdown>
  96. </template>
  97. </el-table-column>
  98. </el-table>
  99. </div>
  100. </div>
  101. </template>
  102. <script>
  103. import api from "../../../server/home";
  104. export default {
  105. data() {
  106. return {
  107. level: "", //10店长可排班
  108. dateList: "", //选择日期的绑定
  109. tableData: [], //值班列表
  110. nameList: [], //员工列表
  111. row: "", //存入数据的行
  112. column: "", //存入数据的列
  113. titleList: [], //月份数组(最多两个月份)
  114. month: "", //今月
  115. year: "", //今年
  116. day: "", //今日
  117. activeClass: 0, //月份活动类名
  118. one_selectMonth: "",
  119. one_selectYear: "",
  120. selectMonth: "", //选择的月份
  121. selectYear: "", //选择的年份
  122. pickerOptions: {
  123. disabledDate: (time) => {
  124. const sixMonth = new Date().setMonth(new Date().getMonth() - 5);
  125. const maxValue = new Date().setMonth(new Date().getMonth() + 1);
  126. return time.getTime() > maxValue || time.getTime() < sixMonth;
  127. },
  128. }, // 筛选选择日期只能查看前6个月 后一个月
  129. disabled: false, // 之前的日期不可分配
  130. addYear: "",
  131. typeList: ["早班", "中班", "晚班", "休息", "离职"], //1是早班 2是中班 3是晚班 9是休息 10离职
  132. };
  133. },
  134. methods: {
  135. // 将本月过去的时间添加背景色
  136. overTime({ row, rowIndex }) {
  137. if (row.date.split("日")[0].split("月")[0] != this.month) {
  138. return;
  139. }
  140. let one_selectTime =
  141. this.year +
  142. "-" +
  143. row.date.split("日")[0].split("月")[0] +
  144. "-" +
  145. row.date.split("日")[0].split("月")[1];
  146. //现在的时间
  147. let one_nowTime = this.year + "-" + this.month + "-" + this.day;
  148. if (
  149. new Date(one_selectTime.replace(/-/g, "/")) <
  150. new Date(one_nowTime.replace(/-/g, "/"))
  151. ) {
  152. return "over-row";
  153. }
  154. },
  155. // 删除最后一个标题
  156. delTitle() {
  157. // 删除标题数组最后一个
  158. this.titleList.pop();
  159. // 自动切换到本月月份
  160. this.checkTitle(0);
  161. this.selectMonth = "";
  162. this.selectYear = "";
  163. this.addYear = "";
  164. },
  165. // 查询日期
  166. search() {
  167. // 没有选择日期,返回
  168. if (this.one_selectMonth == "" || this.one_selectMonth == this.month) {
  169. return;
  170. }
  171. this.activeClass = 1;
  172. this.selectMonth = this.one_selectMonth;
  173. this.selectYear = this.one_selectYear;
  174. // 设置月份数组最后一个为当前选择月份
  175. this.titleList[1] = this.selectMonth;
  176. // 获取数据月份
  177. this.currentMonthDays(this.selectMonth);
  178. this.getWorkList(this.selectMonth, this.selectYear);
  179. },
  180. // 选择日期
  181. selectTime(e) {
  182. // 获取月份
  183. this.one_selectMonth = e.getMonth() + 1;
  184. this.one_selectYear = e.getFullYear();
  185. },
  186. // 获取本月所有的日期
  187. currentMonthDays(month1) {
  188. let now = new Date();
  189. // 这个月的月份
  190. this.month = now.getMonth() + 1;
  191. this.year = now.getFullYear();
  192. this.day = now.getDate();
  193. const daysOfMonth = [];
  194. let year = month1 == 1 ? now.getFullYear() + 1 : now.getFullYear();
  195. let month = month1 || now.getMonth() + 1;
  196. if (!month1) {
  197. this.titleList.push(month);
  198. }
  199. month = parseInt(month, 10);
  200. const lastDayOfMonth = new Date(year, month, 0).getDate();
  201. var weekDay = [
  202. "(周天)",
  203. "(周一)",
  204. "(周二)",
  205. "(周三)",
  206. "(周四)",
  207. "(周五)",
  208. "(周六)",
  209. ];
  210. for (let i = 1; i <= lastDayOfMonth; i++) {
  211. let arr = year + "/" + month + "/" + i;
  212. var myDate = new Date(Date.parse(arr));
  213. let week = weekDay[myDate.getDay()];
  214. daysOfMonth.push(month + "月" + i + "日" + " " + week);
  215. }
  216. let arr = [];
  217. daysOfMonth.map((item) => {
  218. arr.push({ date: item });
  219. });
  220. this.tableData = arr;
  221. },
  222. // 选择上班类型
  223. selectType(e) {
  224. this.$set(this.tableData[this.row], [`name${this.column - 1}`], e);
  225. // 选择的类型 (1是早班 2是中班 3是晚班 9是休息 10离职)
  226. let type = "";
  227. e == "早班"
  228. ? (type = 1)
  229. : e == "中班"
  230. ? (type = 2)
  231. : e == "晚班"
  232. ? (type = 3)
  233. : e == "休息"
  234. ? (type = 4)
  235. : (type = 5);
  236. let year = this.year;
  237. // 判断是否选择的是明年的1月
  238. if (this.selectYear > this.year && this.activeClass != 0) {
  239. year = this.year + 1;
  240. } else {
  241. year = this.year;
  242. }
  243. // 判断添加下一个月是1月
  244. if (this.addYear && this.titleList[1] == 1) {
  245. year = this.addYear;
  246. }
  247. // 选择的时间
  248. let day =
  249. year +
  250. "-" +
  251. this.tableData[this.row].date.split("日")[0].split("月")[0] +
  252. "-" +
  253. this.tableData[this.row].date.split("日")[0].split("月")[1];
  254. let user_id = this.nameList[this.column - 1].id;
  255. let params = {
  256. day,
  257. type,
  258. user_id,
  259. };
  260. // 添加排班
  261. api.selectScheduling(params).then((res) => {
  262. if (res.code == 200) {
  263. }
  264. });
  265. },
  266. tableCellClassName({ row, column, rowIndex, columnIndex }) {
  267. //注意这里是解构
  268. //利用单元格的 className 的回调方法,给行列索引赋值
  269. row.index = rowIndex;
  270. column.index = columnIndex;
  271. },
  272. // 获取填写日期的行列
  273. handle(row, column, event, cell) {
  274. this.row = row.index; //行
  275. this.column = column.index; //列
  276. let one_year = this.selectYear == "" ? this.year : this.selectYear;
  277. if (this.activeClass == 0) {
  278. one_year = this.year;
  279. }
  280. if (this.month + 1 == this.titleList[1]) {
  281. one_year = this.year;
  282. } else if (this.titleList[this.activeClass] == 1) {
  283. one_year = this.addYear || this.selectYear;
  284. } else {
  285. one_year = this.selectYear || this.year;
  286. }
  287. //选择的时间
  288. let one_selectTime =
  289. one_year +
  290. "-" +
  291. this.tableData[this.row].date.split("日")[0].split("月")[0] +
  292. "-" +
  293. this.tableData[this.row].date.split("日")[0].split("月")[1];
  294. //现在的时间
  295. let one_nowTime = this.year + "-" + this.month + "-" + this.day;
  296. // 判断是否是今天以前的时间 是否可选择
  297. new Date(one_selectTime.replace(/-/g, "/")) <
  298. new Date(one_nowTime.replace(/-/g, "/"))
  299. ? (this.disabled = true)
  300. : (this.disabled = false);
  301. // 如果是店员不予操作
  302. if (this.level != 10) {
  303. this.disabled = true;
  304. }
  305. },
  306. // 添加表单
  307. addList() {
  308. // 最多可有两个月
  309. if (this.titleList.length >= 2) {
  310. return;
  311. }
  312. // 判断是否是最后一个月是的话添加表单就为1月份
  313. if (this.month == 12) {
  314. this.currentMonthDays(1);
  315. this.titleList.push(1);
  316. this.addYear = this.year + 1;
  317. } else {
  318. this.currentMonthDays(this.month + 1);
  319. this.titleList.push(this.month + 1);
  320. }
  321. this.activeClass = this.activeClass + 1;
  322. this.getWorkList(this.month + 1, this.addYear || this.year);
  323. },
  324. // 切换表单
  325. checkTitle(index) {
  326. this.activeClass = index;
  327. // 获取切换月的月份
  328. this.month = this.titleList[index];
  329. this.currentMonthDays(this.month);
  330. this.getWorkList(
  331. this.titleList[this.activeClass],
  332. this.activeClass == 0
  333. ? this.year
  334. : this.addYear == ""
  335. ? this.selectYear || this.year
  336. : this.addYear
  337. );
  338. },
  339. // 获取员工列表
  340. getStaffList() {
  341. api.getStaffList().then((res) => {
  342. if (res.code == 200) {
  343. this.nameList = res.data;
  344. }
  345. });
  346. },
  347. // 获取排班列表
  348. getWorkList(month, year) {
  349. let month1 = year + "-" + month;
  350. let params = {
  351. month: month1,
  352. };
  353. api.getWorkList(params).then((res) => {
  354. if (res.code == 200) {
  355. // 获取全部排班
  356. let arr = [];
  357. res.data.map((item) => {
  358. arr.push(item.type);
  359. });
  360. arr.map((item, index) => {
  361. let newArr = this.tableData[index];
  362. item.map((item1, index1) => {
  363. this.$set(newArr, `name${index1}`, this.typeList[item1[0] - 1]);
  364. });
  365. });
  366. }
  367. });
  368. },
  369. },
  370. created() {
  371. // 获取店长员工等级
  372. this.level = localStorage.getItem("level");
  373. // 获取日期列表
  374. this.currentMonthDays();
  375. // 获取员工列表
  376. this.getStaffList();
  377. // 获取排班列表
  378. this.getWorkList(this.month, this.year);
  379. },
  380. };
  381. </script>
  382. <style lang='less' scoped>
  383. .header {
  384. width: 857px;
  385. height: 70px;
  386. background: #ffffff;
  387. border-radius: 8px;
  388. display: flex;
  389. align-items: center;
  390. justify-content: space-between;
  391. .header-left {
  392. display: flex;
  393. align-items: center;
  394. .title {
  395. width: 217px;
  396. height: 70px;
  397. // background: #fa7d22;
  398. border-radius: 8px;
  399. // color: #ffffff;
  400. text-align: center;
  401. line-height: 70px;
  402. font-size: 24px;
  403. font-weight: 400;
  404. position: relative;
  405. .el-icon-close {
  406. color: #ffffff;
  407. font-size: 24px;
  408. position: absolute;
  409. top: 3px;
  410. right: 3px;
  411. padding: 0;
  412. }
  413. }
  414. .titleActive {
  415. background: #fa7d22;
  416. color: #ffffff;
  417. }
  418. .add {
  419. width: 60px;
  420. height: 60px;
  421. border-radius: 8px;
  422. border: 1px solid #e6e6e6;
  423. margin-left: 5px;
  424. text-align: center;
  425. line-height: 60px;
  426. /deep/i {
  427. font-size: 19px;
  428. color: #e6e6e6;
  429. }
  430. }
  431. }
  432. .header-right {
  433. display: flex;
  434. align-items: center;
  435. .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--month {
  436. width: 132px;
  437. height: 32px;
  438. background: #ffffff;
  439. border-radius: 2px;
  440. }
  441. .search {
  442. width: 80px;
  443. height: 30px;
  444. background: #fa7d22;
  445. border-radius: 20px;
  446. line-height: 30px;
  447. text-align: center;
  448. color: #ffffff;
  449. margin-right: 20px;
  450. margin-left: 10px;
  451. }
  452. }
  453. }
  454. .list {
  455. height: 420px;
  456. width: 857px;
  457. background: #ffffff;
  458. border-radius: 8px;
  459. margin-top: 18px;
  460. padding: 0 11px;
  461. overflow-x: scroll;
  462. overflow-y: scroll;
  463. .el-dropdown {
  464. width: 100%;
  465. height: 100%;
  466. }
  467. .amend {
  468. width: 100%;
  469. height: 100%;
  470. }
  471. }
  472. /deep/ .el-table tbody tr:hover > td {
  473. background: #fff !important;
  474. }
  475. /deep/tr.el-table__row > * {
  476. border-left: 1px solid #ebeef5;
  477. border-right: 1px solid #ebeef5;
  478. height: 41px;
  479. width: 115px;
  480. }
  481. /deep/.cell {
  482. height: 100%;
  483. width: 100%;
  484. }
  485. .color1 {
  486. color: #19d1ca !important;
  487. }
  488. .color2 {
  489. color: #ffafaf !important;
  490. }
  491. .color3 {
  492. color: #4d5e8e !important ;
  493. }
  494. .color4 {
  495. color: #fa7d22 !important;
  496. }
  497. .color5 {
  498. color: #999999 !important;
  499. }
  500. .el-month-table td.current:not(.disabled) .cell {
  501. color: #4d5e8e;
  502. }
  503. /deep/ .el-month-table td.today .cell {
  504. color: #4d5e8e;
  505. font-size: 40px;
  506. }
  507. /deep/.el-picker-panel__body {
  508. background-color: red;
  509. }
  510. /deep/.el-table {
  511. .el-table__body-wrapper {
  512. height: calc(100% - 48px) !important; // 表格高度减去表头的高度
  513. }
  514. }
  515. /deep/.el-table .over-row {
  516. background: #f7f8fa;
  517. pointer-events: none;
  518. }
  519. </style>