【Schedule轮班排班】10.双击表格值班人手动修改功能，排版日历视图实现

# 手动修改值班人 有时需要手动去修改某天的值班，所以直接在排班表上增加手动修改功能 ```html <td class="text-center" ondblclick="renew_staff({{ forloop.counter }}, '{{ schedule.date|date:"Y-m-d" }}', 'staff')" id="id_staff_{{ forloop.counter }}" title="双击修改">{{ schedule.staff|default_if_none:'' }}</td> <td class="text-center" ondblclick="renew_staff({{ forloop.counter }}, '{{ schedule.date|date:"Y-m-d" }}', 'real_staff')" id="id_real_staff_{{ forloop.counter }}" title="双击修改">{{ schedule.real_staff|default_if_none:'' }}</td> ```  双击会出现输入框，使用js提交表单 ```html <script> function submit_staff(table_id, date, staff_flag) { //console.log(table_id); let new_staff = $('#new_staff_' + table_id).val(); console.log(new_staff); console.log(date); console.log(staff_flag); $.post("{% url 'duty:renew_staff' %}", {"date": date, 'staff_flag': staff_flag, 'new_staff': new_staff, 'csrfmiddlewaretoken': '{{ csrf_token }}'}, function (data) { window.location.reload(); } ); } function renew_staff(table_id, date, staff_flag) { //console.log(table_id); if (staff_flag === 'staff') { $('#id_staff_' + table_id).html('<input id="new_staff_{update_id}" style="width: 60px; height:26px"><a class="btn btn-info btn-xs" onclick="submit_staff({update_id}, {date}, {staff_flag})">保存</a>'.replace(/{update_id}/g, table_id).replace(/{date}/g, "'" + date + "'").replace(/{staff_flag}/, "'" + staff_flag + "'")) } else { $('#id_real_staff_' + table_id).html('<input id="new_staff_{update_id}" style="width: 60px; height:26px"><a class="btn btn-info btn-xs" onclick="submit_staff({update_id}, {date}, {staff_flag})">保存</a>'.replace(/{update_id}/g, table_id).replace(/{date}/g, "'" + date + "'").replace(/{staff_flag}/, "'" + staff_flag + "'")) } } </script> ``` 视图中处理表单 ```python # 手动修改值班人 @simple_permission_required(permission='it_sys_user') def renew_staff(request): new_staff = request.POST.get('new_staff') staff_flag = request.POST.get('staff_flag') date = request.POST.get('date') schedule_data = Schedule.objects.filter(date=date).first() if staff_flag == "staff": schedule_data.staff = new_staff elif staff_flag == "real_staff": schedule_data.real_staff = new_staff schedule_data.save() return HttpResponse(json.dumps({})) ``` # 日历视图显示值班表 这个主要是使用了`fullcalendar`这个库 页面实现如下 ```html {% extends 'schedule/base-duty.html' %} {% load static %} {% block title %}{{ block.super }} - 近期排班{% endblock %} {% block css %} <link href="{% static 'hadmin/css/plugins/iCheck/custom.css' %}" rel="stylesheet"> <link href="{% static 'hadmin/css/plugins/fullcalendar/fullcalendar.css' %}" rel="stylesheet"> <link href="{% static 'hadmin/css/plugins/fullcalendar/fullcalendar.print.css' %}" rel="stylesheet"> <link href="{% static 'hadmin/css/animate.css' %}" rel="stylesheet"> <link href="{% static 'hadmin/css/style.css' %}" rel="stylesheet"> {% endblock %} {% block breadcrumb %} <li> <a href="/">主页</a> </li> <li> <strong>值班日历</strong> </li> {% endblock %} {% block content %} <br> <div class="col-sm-3"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>值班人</h5> </div> <div class="ibox-content"> <div id='external-events'> <p>姓名</p> {% for employee in all_employee %} <div class='external-event navy-bg'>{{ employee.name }}</div> {% endfor %} <!--p class="m-t"> <input type='checkbox' id='drop-remove' class="i-checks"/> <label for='drop-remove'>移动后删除</label> </p--> </div> </div> </div> <div class="ibox float-e-margins"> <div class="ibox-content"> <h2><a href="{% url 'duty:schedule' %}">列表视图</a></h2> 查看原列表视图 </div> </div> </div> <div class="col-sm-9"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>值班表 </h5> </div> <div class="ibox-content"> <div id="calendar"></div> </div> </div> </div> {% endblock %} {% block js %} <script src="{% static 'hadmin/js/jquery-ui.custom.min.js' %}"></script> <!-- iCheck --> <script src="{% static 'hadmin/js/plugins/iCheck/icheck.min.js' %}"></script> <!-- Full Calendar --> <script src="{% static 'hadmin/js/plugins/fullcalendar/fullcalendar.min.js' %}"></script> <script> {#let scheduleData = '';#} $.ajax({ url: '{% url "duty:schedule_calendar_data" %}', type: 'GET', dataType: 'json', async:false, success: function (data, status) { scheduleData = data } }); console.log(scheduleData); $(document).ready(function () { $('.i-checks').iCheck({ checkboxClass: 'icheckbox_square-green', radioClass: 'iradio_square-green', }); /* initialize the external events -----------------------------------------------------------------*/ $('#external-events div.external-event').each(function () { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // make the event draggable using jQuery UI $(this).draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 0 // original position after the drag }); }); /* initialize the calendar -----------------------------------------------------------------*/ var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ header: { left: 'prev,next,today', center: 'title', right: 'month,agendaWeek,agendaDay,listWeek' }, firstDay: 1, // 每月第一列改为周一 height: 650, //日历表格高度 editable: false, droppable: false, // this allows things to be dropped onto the calendar !!! drop: function (date, allDay) { // this function is called when something is dropped // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); // we need to copy it, so that multiple events don't have a reference to the same object var copiedEventObject = $.extend({}, originalEventObject); // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); // is the "remove after drop" checkbox checked? if ($('#drop-remove').is(':checked')) { // if so, remove the element from the "Draggable Events" list $(this).remove(); } }, events: scheduleData, }); }); </script> {% endblock %} ``` 视图实现如下 ```python # 日历视图中显示值班表 @simple_permission_required(permission='it_sys_user') def schedule_calendar(request): all_employee = Employee.objects.filter(available=True) return render(request, 'schedule/schedule-calendar.html', {"all_employee": all_employee}) # 提供日历视图数据 @simple_permission_required(permission='it_sys_user') def schedule_calendar_data(request): data = [] today = datetime.date.today() start_date = today - datetime.timedelta(20) # 时间往前20天 end_date = today + datetime.timedelta(39) schedules = Schedule.objects.filter(date__range=(start_date, end_date)).order_by('date') # 需要显示的值班 for schedule in schedules: date_str = str(schedule.date) if schedule.real_staff: data.append({"title": "更换值班：" + schedule.real_staff, "start": date_str + " 18:00", "end": date_str + " 21:00", "allDay": True}) if schedule.duty_type == 1: # 晚上值班 data.append({"title": "今日值班：" + schedule.staff, "start": date_str + " 18:00", "end": date_str + " 21:00", "allDay": True}) elif schedule.duty_type == 2: # 周末值班 data.append({"title": "周末值班：" + schedule.staff, "backgroundColor": "#23b7e5", "start": date_str}) return HttpResponse(json.dumps(data)) ``` 

明人不说暗话 领红包就是支持！！！ 来都来了，再到页面底部看下呗~ ↓ ↓ ↓

本文地址： http://blog.starmeow.cn/detail/36660e59856b4de58a219bcf4e27eba3/

很赞哦！ (5)