Calculation/app/view/phase_pay/modal.ejs

<div class="modal" id="add-qi" data-backdrop="static" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
        <form class="modal-content" action="pay/add" method="POST" onsubmit="return checkAddValid();">
            <div class="modal-header">
                <h5 class="modal-title">添加新一期</h5>
            </div>
            <div class="modal-body">
                <div class="form-group form-group-sm">
                    <label>支付期</label>
                    <input class="form-control form-control-sm" value="第 <%- (phasePays.length + 1) %> 期" type="text" readonly="">
                    <input type="hidden" value="<%- (phasePays.length + 1) %>" name="phase_order">
                </div>
                <div class="form-group form-group-sm">
                    <label>支付年月</label>
                    <input class="datepicker-here form-control form-control-sm" name="date" placeholder="点击选择年月" data-view="months" data-min-view="months" data-date-format="yyyy-MM" data-language="zh" type="text">
                </div>
                <div class="form-group form-group-sm">
                    <label>计量期</label>
                    <select class="form-control form-control-sm" name="stage">
                        <% for (const s of validStages) { %>
                            <option value="<%- s.order %>" <%- (s.order === validStages[0].order ? 'selected' : '') %>>第 <%- s.order %> 期</option>
                        <% } %>
                    </select>
                </div>
                <div class="form-group form-group-sm">
                    <label>支付期备注</label>
                    <textarea class="form-control form-control-sm" rows="3" name="memo"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>" />
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-sm btn-primary">确定</button>
            </div>
        </form>
    </div>
</div>
<div class="modal" id="edit-qi" data-backdrop="static" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
        <form class="modal-content" action="pay/save" method="POST" onsubmit="return checkEditValid();">
            <div class="modal-header">
                <h5 class="modal-title">编辑</h5>
            </div>
            <div class="modal-body">
                <div class="form-group form-group-sm">
                    <label>支付期</label>
                    <input class="form-control form-control-sm" id="edit-name" value="第 <%- (phasePays.length + 1) %> 期" type="text" readonly="">
                </div>
                <div class="form-group form-group-sm">
                    <label>支付年月</label>
                    <input class="datepicker-here form-control form-control-sm" id="edit-date" name="date" placeholder="点击选择年月" data-view="months" data-min-view="months" data-date-format="yyyy-MM" data-language="zh" type="text">
                </div>
                <div class="form-group form-group-sm">
                    <label>支付期备注</label>
                    <textarea class="form-control form-control-sm" rows="3" name="memo"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" value="" name="phase_id">
                <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>" />
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-sm btn-primary">确定</button>
            </div>
        </form>
    </div>
</div>
<script>
    $('.datepicker-here').datepicker({
        autoClose: true,
    });
    const checkAddValid = function() {
        if ($('[name=date]', '#add-qi').val() == '') {
            toastr.error('请选择计量年月');
            return false;
        }

        if ($('[name=stage]', '#add-qi').val() == '') {
            toastr.error('请选择计量期');
            return false;
        }
    }
    const checkEditValid = function() {
        if ($('[name=date]', '#edit-qi').val() == '') {
            toastr.error('请选择计量年月');
            return false;
        }
    }
    $('.edit-pay').on('click', function () {
        const id = $(this).data('id');
        const phasePay = phasePays.find(x => { return x.id === id; });
        if (!phasePay) return;

        const editDate = $('#edit-date').datepicker().data('datepicker');
        $('#edit-name').val('第 ' + phasePay.phase_order + ' 期');
        if (phasePay.phase_date) {
            editDate.selectDate(new Date(phasePay.phase_date));
        }
        $('[name=memo]', '#edit-qi').html(phasePay.memo);
        $('[name=phase_id]', '#edit-qi').val(phasePay.id);
        $('#edit-qi').modal('show');
    })
</script>