|
|
@@ -0,0 +1,491 @@
|
|
|
+<template>
|
|
|
+ <j-modal title="排班" :width="1000" :visible="visible" switchFullscreen @cancel="handleCancel" :footer="true">
|
|
|
+
|
|
|
+ <a-spin :spinning="confirmLoading">
|
|
|
+ <div class='month'>
|
|
|
+ <ul>
|
|
|
+ <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
|
|
|
+ <li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
|
|
|
+ <li class='year-month'>
|
|
|
+ <span class='choose-year'>{{ currentYear }}年</span>
|
|
|
+ <span class='choose-month'>{{ currentMonth }}月</span>
|
|
|
+ </li>
|
|
|
+ <li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
|
|
|
+ </ul>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ <hr>
|
|
|
+ <div>
|
|
|
+ <a-table bordered :data-source="dataSource" :columns="columns" :scroll="{ y: 440,x:1000 }"
|
|
|
+ :pagination="ipagination" @change="handleTableChange">
|
|
|
+
|
|
|
+ <template v-for='(dayobject,i) in days' :slot="dayobject.day.getDate()" style="color: #ff6b81">
|
|
|
+ <div style="margin-left: 14px;">
|
|
|
+ <p>{{dayobject.day.getDate()}}</p>
|
|
|
+ <div style="margin-left: -1px;">
|
|
|
+ <p v-if='dayobject.day.getDay()==0'>日</p>
|
|
|
+ <p v-else-if='dayobject.day.getDay()==1'>一</p>
|
|
|
+ <p v-else-if='dayobject.day.getDay()==2'>二</p>
|
|
|
+ <p v-else-if='dayobject.day.getDay()==3'>三</p>
|
|
|
+ <p v-else-if='dayobject.day.getDay()==4'>四</p>
|
|
|
+ <p v-else-if='dayobject.day.getDay()==5'>五</p>
|
|
|
+ <p v-else-if='dayobject.day.getDay()==6'>六</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-calendar>
|
|
|
+ <a-modal v-model="visibles" title="班次" @ok="shiftOk()">
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline">
|
|
|
+ <a-row :gutter="24">
|
|
|
+
|
|
|
+ <a-col :xl="10" :lg="10" :md="8" :sm="24">
|
|
|
+ <a-form-item label="班次名称">
|
|
|
+ <a-select v-model="shiftname" placeholder="请选择班次">
|
|
|
+ <a-select-option value="">请选择</a-select-option>
|
|
|
+ <a-select-option v-for="(item,index) in shiftlist" :value="item.id">{{item.name}}</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ </a-spin>
|
|
|
+ </j-modal>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ httpAction,
|
|
|
+ getFileAccessHttpUrl,
|
|
|
+ getAction,
|
|
|
+ deleteAction
|
|
|
+ } from '@/api/manage'
|
|
|
+ import pick from 'lodash.pick'
|
|
|
+ import moment from "moment"
|
|
|
+ import {
|
|
|
+ JeecgListMixin
|
|
|
+ } from '@/mixins/JeecgListMixin'
|
|
|
+ import '@/assets/less/TableExpand.less'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "UserShiftModal",
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataSource: [],
|
|
|
+ columns: [],
|
|
|
+ queryParam: {
|
|
|
+ shiftDate: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ },
|
|
|
+
|
|
|
+ currentMonth: new Date().getMonth(),
|
|
|
+ currentYear: new Date().getYear(),
|
|
|
+ days: [],
|
|
|
+ visibles: false,
|
|
|
+ shiftDate: null,
|
|
|
+ show: 1,
|
|
|
+ id: null,
|
|
|
+ shiftname: "",
|
|
|
+ username: "",
|
|
|
+ deptlist: null,
|
|
|
+ shiftlist: null,
|
|
|
+ title: "操作",
|
|
|
+ visible: false,
|
|
|
+ key: null,
|
|
|
+ index: null,
|
|
|
+ vs: false,
|
|
|
+ model: {},
|
|
|
+ listData: [],
|
|
|
+ confirmLoading: false,
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ validatorRules: {},
|
|
|
+ url: {
|
|
|
+ add: "/userShift/userShift/addUserShift",
|
|
|
+ userShift: "/userShift/userShift/queryByUser",
|
|
|
+ shift: "/shift/shift/list",
|
|
|
+ list: "/userShift/userShift/queryMothByUser",
|
|
|
+ moth: "/userShift/userShift/queryMothByUser",
|
|
|
+ deptlist: "/sys/sysDepart/listAll",
|
|
|
+ delUserShift: '/userShift/userShift/delete'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getListData(null)
|
|
|
+ this.initData(null)
|
|
|
+ this.queryShift()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ CustomCell(record, index) {
|
|
|
+ return {
|
|
|
+ on: {
|
|
|
+ mouseenter: (event) => {
|
|
|
+ record.setExecutorVisible = true;
|
|
|
+ console.log("悬浮" + record.setExecutorVisible);
|
|
|
+
|
|
|
+ },
|
|
|
+ mouseleave: (event) => {
|
|
|
+
|
|
|
+ record.setExecutorVisible = false;
|
|
|
+ console.log("离开");
|
|
|
+ },
|
|
|
+ click: (event) => {
|
|
|
+
|
|
|
+ this.visibles = true;
|
|
|
+ this.index = index;
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ executePersonCustomCell(record, index) {
|
|
|
+ return {
|
|
|
+ on: {
|
|
|
+ mouseenter: (event) => {
|
|
|
+ record.setExecutorVisible = true;
|
|
|
+ console.log("悬浮" + record.setExecutorVisible);
|
|
|
+
|
|
|
+ },
|
|
|
+ mouseleave: (event) => {
|
|
|
+
|
|
|
+ record.setExecutorVisible = false;
|
|
|
+ console.log("离开");
|
|
|
+ },
|
|
|
+ click: (event) => {
|
|
|
+ this.key = event.target.cellIndex;
|
|
|
+ this.shiftDate = this.currentYear + "-" + this.currentMonth + "-" + this.key + " 00:00:000";
|
|
|
+ this.visibles = true;
|
|
|
+ this.index = index;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ pickPre: function(year, month) {
|
|
|
+ var d = new Date(this.formatDate(year, month, 1))
|
|
|
+ d.setDate(0)
|
|
|
+ this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
|
|
|
+ this.queryParam.shiftDate=this.formatDate(d.getFullYear(), d.getMonth() + 1, 1) + " 00:00:000";
|
|
|
+ this.$options.methods.searchQuery.call(this)
|
|
|
+ },
|
|
|
+
|
|
|
+ pickNext: function(year, month) {
|
|
|
+ var d = new Date(this.formatDate(year, month + 1, 1))
|
|
|
+ this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
|
|
|
+ this.queryParam.shiftDate=this.formatDate(d.getFullYear(), d.getMonth() + 1, 1) + " 00:00:000";
|
|
|
+ this.$options.methods.searchQuery.call(this)
|
|
|
+ },
|
|
|
+
|
|
|
+ initData: function(cur) {
|
|
|
+ this.columns = [];
|
|
|
+ var date
|
|
|
+ if (cur) {
|
|
|
+ date = new Date(cur)
|
|
|
+ } else {
|
|
|
+ var now = new Date()
|
|
|
+ var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1))
|
|
|
+ d.setDate(35)
|
|
|
+ date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
|
|
|
+ }
|
|
|
+ this.currentDay = date.getDate()
|
|
|
+ this.currentYear = date.getFullYear()
|
|
|
+ this.currentMonth = date.getMonth() + 1
|
|
|
+ this.currentWeek = date.getDay() // 1...6,0
|
|
|
+
|
|
|
+ var str = this.formatDate(
|
|
|
+ this.currentYear,
|
|
|
+ this.currentMonth,
|
|
|
+ this.currentDay
|
|
|
+ )
|
|
|
+ this.days.length = 0
|
|
|
+ var moth = new Date(str);
|
|
|
+ moth.setDate(28)
|
|
|
+
|
|
|
+ moth.setMonth(moth.getMonth() + 1);
|
|
|
+ moth.setDate(0);
|
|
|
+ this.columns.push({
|
|
|
+ title: '名称',
|
|
|
+ dataIndex: 'realname',
|
|
|
+ width: '120px'
|
|
|
+ })
|
|
|
+ for (var i = 1; i <= moth.getDate(); i++) {
|
|
|
+ var d = new Date(this.formatDate(this.currentYear, this.currentMonth, i))
|
|
|
+ var dayobjectSelf = {
|
|
|
+ width: '70px',
|
|
|
+ slots: {
|
|
|
+ title: d.getDate()
|
|
|
+ },
|
|
|
+ dataIndex: "a" + d.getDate(),
|
|
|
+ customCell: this.executePersonCustomCell
|
|
|
+ } // 用一个对象包装Date对象 以便为以后预定功能添加属性
|
|
|
+ var dat = {};
|
|
|
+ dat.day = d;
|
|
|
+ this.days.push(dat)
|
|
|
+ this.columns.push(dayobjectSelf) // 将日期放入data 中的days数组 供页面渲染使用
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 返回 类似 2016-01-02 格式的字符串
|
|
|
+ formatDate: function(year, month, day) {
|
|
|
+ var y = year
|
|
|
+ if (month > 12) {
|
|
|
+ y = y + 1;
|
|
|
+ month = 1;
|
|
|
+ };
|
|
|
+ var m = month
|
|
|
+ if (m < 10) m = '0' + m
|
|
|
+ var d = day
|
|
|
+ if (d < 10) d = '0' + d
|
|
|
+ return y + '-' + m + '-' + d
|
|
|
+ },
|
|
|
+
|
|
|
+ delUserShift(e) {
|
|
|
+ this.vs = true;
|
|
|
+ console.log(e)
|
|
|
+ deleteAction(this.url.delUserShift, {
|
|
|
+ id: e
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success(res.message);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.$message.warning(res.message);
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+ this.vs = false;
|
|
|
+ this.getListData(moment(this.queryParam.entryDate).format('YYYY-MM-DD HH:mm:ss'));
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ shiftOk() {
|
|
|
+ if (this.shiftname == null || this.shiftname == "") {
|
|
|
+ this.$message.warning("请选择班次!");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ for (var i = 0; i < this.shiftlist.length; i++) {
|
|
|
+ if (this.shiftname == this.shiftlist[i].id) {
|
|
|
+ httpAction(this.url.add, {
|
|
|
+ userId: this.dataSource[this.index].id,
|
|
|
+ shiftId: this.shiftname,
|
|
|
+ shiftDate: this.shiftDate
|
|
|
+ }, "post").then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.key == 1) {
|
|
|
+ this.dataSource[this.index].a1 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 2) {
|
|
|
+ this.dataSource[this.index].a2 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 3) {
|
|
|
+ this.dataSource[this.index].a3 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 4) {
|
|
|
+ this.dataSource[this.index].a4 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 5) {
|
|
|
+ this.dataSource[this.index].a5 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 6) {
|
|
|
+ this.dataSource[this.index].a6 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 7) {
|
|
|
+ this.dataSource[this.index].a7 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 8) {
|
|
|
+ this.dataSource[this.index].a8 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 9) {
|
|
|
+ this.dataSource[this.index].a9 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 10) {
|
|
|
+ this.dataSource[this.index].a10 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 11) {
|
|
|
+ this.dataSource[this.index].a11 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 12) {
|
|
|
+ this.dataSource[this.index].a12 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 13) {
|
|
|
+ this.dataSource[this.index].a13 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 14) {
|
|
|
+ this.dataSource[this.index].a14 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 15) {
|
|
|
+ this.dataSource[this.index].a15 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 16) {
|
|
|
+ this.dataSource[this.index].a16 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 17) {
|
|
|
+ this.dataSource[this.index].a17 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 18) {
|
|
|
+ this.dataSource[this.index].a18 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 19) {
|
|
|
+ this.dataSource[this.index].a19 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 20) {
|
|
|
+ this.dataSource[this.index].a20 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 21) {
|
|
|
+ this.dataSource[this.index].a21 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 22) {
|
|
|
+ this.dataSource[this.index].a22 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 23) {
|
|
|
+ this.dataSource[this.index].a23 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 24) {
|
|
|
+ this.dataSource[this.index].a24 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 25) {
|
|
|
+ this.dataSource[this.index].a25 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 26) {
|
|
|
+ this.dataSource[this.index].a26 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 27) {
|
|
|
+ this.dataSource[this.index].a27 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 28) {
|
|
|
+ this.dataSource[this.index].a28 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 29) {
|
|
|
+ this.dataSource[this.index].a29 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 30) {
|
|
|
+ this.dataSource[this.index].a30 = this.shiftlist[i].name;
|
|
|
+ } else if (this.key == 31) {
|
|
|
+ this.dataSource[this.index].a31 = this.shiftlist[i].name;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.dataSource[this.index].shfitid = this.shiftlist[i].id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.visibles = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ close() {
|
|
|
+ this.selectedRowKeys = [];
|
|
|
+ this.queryParam = {};
|
|
|
+ this.shiftname = "";
|
|
|
+ this.id = null;
|
|
|
+ this.$emit('close');
|
|
|
+ this.visible = false;
|
|
|
+ },
|
|
|
+ queryShift() {
|
|
|
+ httpAction(this.url.shift, "", "get").then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.shiftlist = res.result.records;
|
|
|
+ }
|
|
|
+ }).finally(() => {
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCancel() {
|
|
|
+ this.close()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .month {
|
|
|
+ width: 100%;
|
|
|
+ color: #333333;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .month ul {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 35px;
|
|
|
+ list-style-type: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .year-month {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .choose-month {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ padding: 15px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .month ul li {
|
|
|
+ font-size: 12px;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .weekdays {
|
|
|
+ margin: 0;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ color: #999;
|
|
|
+ justify-content: space-around;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weekdays li {
|
|
|
+ display: inline-block;
|
|
|
+ width: 13.6%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .days {
|
|
|
+ padding: 10px;
|
|
|
+ background: #ffffff;
|
|
|
+ margin: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ts {
|
|
|
+ padding: 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ margin: 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .days li {
|
|
|
+ list-style-type: none;
|
|
|
+ display: inline-block;
|
|
|
+ width: 14.2%;
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ padding-top: 5px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #000;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .days li .active {
|
|
|
+ padding: 8px 10px;
|
|
|
+ border-radius: 5%;
|
|
|
+ background: #00b8ec;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .days li .other-month {
|
|
|
+ padding: 5px;
|
|
|
+ color: gainsboro;
|
|
|
+ }
|
|
|
+
|
|
|
+ .days li:hover .act {
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #e1e1e1;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+</style>
|
LG88888888