Calculation/app/public/js/profile_cert.js

/**
 * 账号相关js
 *
 * @author CaiAoLin
 * @date 2018/1/26
 * @version
 */
$(document).ready(function() {
    autoFlashHeight();

    $('#addCert').click(function() {
        postData('/profile/cert/save', { type: 'add_cert' }, function(result) {
            console.log(result);
            const html = insertCertHtml(result.total, result.data);
            $('#certs').prepend(html);
        });
    });

    $('body').on('click', '#certs .add-jx-btn', function() {
        const _self = $(this);
        postData('/profile/cert/save', { type: 'add_jx', id: $(this).parents('.one-cert').data('cid') }, function(result) {
            console.log(result);
            const html = insertJxHtml(result.data, result.jxData);
            _self.parents('.pull-right').siblings('.all-jx').prepend(html);
            console.log(_self.parents('.pull-right').siblings('.all-jx').children('.one-jx').eq(0).find('.jx-date'));
            _self.parents('.pull-right').siblings('.all-jx').children('.one-jx').eq(0).find('.jx-date').datepicker({
                onShow: function (res) {
                    res.$el.attr('readOnly', true);
                },
                onHide: function (res, animationCompleted) {
                    if(animationCompleted) {
                        res.$el.attr('readOnly', false);
                        const val = res.$el.val();
                        const oldVal = res.$el.attr('data-old-date') || '';
                        // 日期格式判断
                        if (val !== '') {
                            const valArr = val.split(' ~ ');
                            for (const v of valArr) {
                                if (!(isNaN(v) && !isNaN(Date.parse(v)))) {
                                    toastr.error('日期格式有误！');
                                    res.$el.val(oldVal);
                                    if (oldVal === '') {
                                        res.clear();
                                    } else {
                                        res.selectDate(new Date(oldVal));
                                    }
                                    return;
                                }
                            }
                        } else if(val !== oldVal) {
                            const data = {
                                id: res.$el.parents('.one-cert').data('cid'),
                                jxid: res.$el.parents('.one-jx').data('jxid'),
                                key: 'date',
                                value: val,
                            };
                            updateJxDataFun(data);
                            res.$el.attr('data-old-date', val);
                        }
                    }
                }
            });
        });
    });

    $('body').on('change', '#certs select', function() {
        const value = parseInt($(this).val());
        const key = $(this).data('type');
        const update_data = {
            id: $(this).parents('.one-cert').data('cid'),
            key,
            value,
        };
        if (key === 'type') {
            let html = '';
            if (value === 0) {
                update_data.other = {
                    key: 'name',
                    value: null,
                };
                html = '<option value="0">请选择</option>';
            } else {
                update_data.other = {
                    key: 'name',
                    value: certSourceConst[showCol4ObjArray(certTypeConst, value, 'value', 'source')][0].value,
                };
                html = changeSourceHtml(certSourceConst[showCol4ObjArray(certTypeConst, value, 'value', 'source')]);
            }
            $(this).parents('.one-cert-msg').find('.select-cert-name').html(html);
        }
        console.log(update_data);
        postData('/profile/cert/save', { type: 'update_cert', update_data }, function(result) {
            console.log(result);
        });
    });

    function changeSourceHtml(source = []) {
        let html = '';
        for (const s of source) {
            html += `<option value="${s.value}">${s.name}</option>`;
        }
        return html;
    }

    $('body').on('change', '#certs .one-cert-msg input[type="text"]', function() {
        const value = $(this).val();
        const key = $(this).data('type');
        const update_data = {
            id: $(this).parents('.one-cert').data('cid'),
            key,
            value,
        };
        console.log(update_data);
        postData('/profile/cert/save', { type: 'update_cert', update_data }, function(result) {
            console.log(result);
        });
    });

    $('body').on('change', '#certs .one-jx input[type="text"]', function() {
        const value = $(this).val();
        const key = $(this).data('type');
        const update_data = {
            id: $(this).parents('.one-cert').data('cid'),
            jxid: $(this).parents('.one-jx').data('jxid'),
            key,
            value,
        };
        console.log(update_data);
        updateJxDataFun(update_data);
    });
    // 设置默认值
    $('.jx-date').each(function() {
        const defaultValue = $(this).val(); // 获取当前元素的 value 属性作为默认值
        if (defaultValue) {
            // 初始化日期选择器，并设置默认值
            $(this).datepicker().data('datepicker').selectDate(new Date(defaultValue));
        }
    });
    $('body .jx-date').datepicker({
        onShow: function (res) {
            res.$el.attr('readOnly', true);
        },
        onHide: function (res, animationCompleted) {
            if(animationCompleted) {
                res.$el.attr('readOnly', false);
                const val = res.$el.val();
                const oldVal = res.$el.attr('data-old-date') || '';
                // 日期格式判断
                if (val !== '') {
                    const valArr = val.split(' ~ ');
                    for (const v of valArr) {
                        if (!(isNaN(v) && !isNaN(Date.parse(v)))) {
                            toastr.error('日期格式有误！');
                            res.$el.val(oldVal);
                            if (oldVal === '') {
                                res.clear();
                            } else {
                                res.selectDate(new Date(oldVal));
                            }
                            return;
                        }
                    }
                } else if(val !== oldVal) {
                    const data = {
                        id: res.$el.parents('.one-cert').data('cid'),
                        jxid: res.$el.parents('.one-jx').data('jxid'),
                        key: 'date',
                        value: val,
                    };
                    updateJxDataFun(data);
                    res.$el.attr('data-old-date', val);
                }
            }
        }
    });

    $('body').on('click', '#certs .del-cert-btn', function() {
        $('#delete-cert-cid').val($(this).attr('data-cid'));
        $('#delete-cert-jxid').val($(this).attr('data-jxid'));
        if ($(this).attr('data-filename')) {
            console.log($(this).attr('data-filename'), $(this).attr('data-jxid'));
            const txt = $(this).attr('data-jxid') ? '培训证明：' : '证书附件：';
            $('#delete-cert-title').text(txt + $(this).attr('data-filename'));
            $('#delete-cert-type').val('file');
        } else {
            $('#delete-cert-title').text($(this).parents('.modal-header').find('b').text());
            $('#delete-cert-type').val('cert');
        }
    });

    $('#delete-cert-btn').click(function() {
        const data = {
            id: $('#delete-cert-cid').val(),
            jxid: $('#delete-cert-jxid').val(),
            type: $('#delete-cert-type').val(),
        };
        console.log(data);
        const _self = $(this);
        postData('/profile/cert/save', { type: 'del_cert', delete_data: data }, function(result) {
            _self.parents('.modal').modal('hide');
            if (data.type === 'file') {
                if (data.jxid) {
                    $(`.one-cert[data-cid="${data.id}"] .one-jx[data-jxid="${data.jxid}"]`).find('.file-show').html('<input type="file" class="jx-file-upload">');
                } else {
                    $(`.one-cert[data-cid="${data.id}"]`).find('.one-cert-msg').find('.file-show').html('<input type="file" class="cert-file-upload">');
                }
            } else {
                if (data.jxid) {
                    $(`.one-cert[data-cid="${data.id}"] .one-jx[data-jxid="${data.jxid}"]`).remove();
                    // 教育信息重新排序
                    for (let i = 0; i < $(`.one-cert[data-cid="${data.id}"] .one-jx`).length; i++) {
                        $(`.one-cert[data-cid="${data.id}"] .one-jx`).eq(i).find('.jx-num').text($(`.one-cert[data-cid="${data.id}"] .one-jx`).length - i);
                    }
                } else {
                    $(`.one-cert[data-cid="${data.id}"]`).remove();
                    // 证书信息重新排序
                    for (let i = 0; i < $(`#certs .one-cert`).length; i++) {
                        $(`#certs .one-cert`).eq(i).find('.cert-num').text($(`#certs .one-cert`).length - i);
                    }
                }
            }
        });
    });

    // 上传证书附件
    $('body').on('change', '#certs .cert-file-upload', function () {
        const file = this.files[0];
        const formData = new FormData();
        if (file === undefined) {
            toastr.error('未选择上传文件！');
            $(this).val('');
            return false;
        }
        const ext = file.name.toLowerCase().split('.').splice(-1)[0];
        const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG|pdf|PDF)$/;
        if (!imgStr.test(ext)) {
            toastr.error('请上传正确的图片或pdf格式文件');
            $(this).val('');
            return
        }
        const filesize = file.size;
        if (filesize > 30 * 1024 * 1024) {
            toastr.error('上传的文件大小不能超过30MB！');
            $(this).val('');
            return false;
        }
        const id = $(this).parents('.one-cert').data('cid');
        formData.append('type', 'upload_cert');
        formData.append('id', id);
        formData.append('file', file);
        console.log(formData);
        $(this).val('');
        const _self = $(this).parents('.file-show');
        postDataWithFile('/profile/cert/upload', formData, function (result) {
            _self.html(`<div class="col-form-label">
                                                                <a href="${fujianOssPath + result.file_path}" target="_blank">${result.file_name}</a> &nbsp;<a href="#del-cert" data-cid="${id}" data-jxid="" data-filename="${result.file_name}" data-toggle="modal" data-target="#del-cert" class="del-cert-btn text-danger">删除</a>
                                                            </div>`);
        });
    });

    // 上传证书附件
    $('body').on('change', '#certs .jx-file-upload', function () {
        const file = this.files[0];
        const formData = new FormData();
        if (file === undefined) {
            toastr.error('未选择上传文件！');
            $(this).val('');
            return false;
        }
        const ext = file.name.toLowerCase().split('.').splice(-1)[0];
        const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG|pdf|PDF)$/;
        if (!imgStr.test(ext)) {
            toastr.error('请上传正确的图片或pdf格式文件');
            $(this).val('');
            return
        }
        const filesize = file.size;
        if (filesize > 30 * 1024 * 1024) {
            toastr.error('上传的文件大小不能超过30MB！');
            $(this).val('');
            return false;
        }
        const id = $(this).parents('.one-cert').data('cid');
        const jxid = $(this).parents('.one-jx').data('jxid');
        formData.append('type', 'upload_jx');
        formData.append('id', id);
        formData.append('jxid', jxid);
        formData.append('file', file);
        console.log(formData);
        $(this).val('');
        const _self = $(this).parents('.file-show');
        postDataWithFile('/profile/cert/upload', formData, function (result) {
            _self.html(`<div class="col-form-label">
                                                                <a href="${fujianOssPath + result.file_path}" target="_blank">${result.file_name}</a> &nbsp;<a href="#del-cert" data-cid="${id}" data-jxid="${jxid}" data-filename="${result.file_name}" data-toggle="modal" data-target="#del-cert" class="del-cert-btn text-danger">删除</a>
                                                            </div>`);
        });
    })

    function updateJxDataFun(data) {
        console.log(data);
        postData('/profile/cert/save', { type: 'update_jx', update_data: data }, function(result) {
            // console.log(result);
        });
    }

    function insertJxHtml(data, jxdata) {
        const html = `
            <div class="one-jx" data-jxid="${jxdata.id}">
                                                        <div class="card mt-3">
                                                            <div class="modal-header">
                                                                <b>继续教育<span class="jx-num">${data.edu_json.length}</span></b>
                                                                <div class="pull-right">
                                                                    <a href="#del-cert" data-cid="${data.id}" data-jxid="${jxdata.id}" data-toggle="modal" data-target="#del-cert" class="del-cert-btn text-danger">删除</a>
                                                                </div>
                                                            </div>
                                                            <div class="card-body">
                                                                <div class="form-group row">
                                                                    <label for="uname" class="ml-3 col-form-label">培训时间：</label>
                                                                    <div class="col-sm-10">
                                                                        <input data-language="zh" data-old-date="${jxdata.date}" data-type="date" placeholder="请选择时间" type="text" data-range="true" data-multiple-dates-separator=" ~ " class="jx-date datepicker-here form-control form-control-sm" value="${jxdata.date ? jxdata.date : ''}">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group row">
                                                                    <label for="uname" class="ml-3 col-form-label">培训单位：</label>
                                                                    <div class="col-sm-10">
                                                                        <input type="text" class="form-control form-control-sm" data-type="unit" value="${jxdata.unit ? jxdata.unit : ''}">
                                                                    </div>
                                                                </div>
                                                                <div class="form-group row">
                                                                    <label for="uname" class="ml-3 col-form-label">培训证明：</label>
                                                                    <div class="col-sm-10 file-show">
                                                                        <input type="file" class="jx-file-upload">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>`;
        return html;
    }

    function insertCertHtml(i, data) {
        let typeHtml = ``;
        for (const r of certTypeConst) {
            typeHtml += `<option value="${r.value}">${r.name}</option>`;
        }
        const html = `<div class="col-6 mt-3 one-cert" data-cid="${data.id}">
                                        <div class="card">
                                            <div class="modal-header">
                                                <b>证书信息<span class="cert-num">${i}</span></b>
                                                <div class="pull-right">
                                                    <a href="#del-cert" data-cid="${data.id}" data-jxid="" data-toggle="modal" data-target="#del-cert" class="del-cert-btn text-danger">删除</a>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <b>持证情况：</b>
                                                <div class="m-3 one-cert-msg">
                                                    <div class="form-group row">
                                                        <label for="uname" class="ml-3 col-form-label">证件名称：</label>
                                                        <div class="row col-sm-10 pr-0">
                                                            <div class="col-6 pr-0">
                                                                <select class="form-control form-control-sm select-cert-type" data-type="type">
                                                                    <option value="0">请选择</option>
                                                                    ${typeHtml}
                                                                </select>
                                                            </div>
                                                            <div class="col-6 pr-0">
                                                                <select class="form-control form-control-sm select-cert-name" data-type="name">
                                                                    <option value="0">请选择</option>
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="uname" class="ml-3 col-form-label">证件编号：</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control form-control-sm" data-type="code" value="${data.code ? data.code : ''}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="uname" class="ml-3 col-form-label">注册单位：</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control form-control-sm" data-type="reg_unit" value="${data.reg_unit ? data.reg_unit : ''}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="uname" class="ml-3 col-form-label">技术职称：</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" class="form-control form-control-sm" data-type="job_title" value="${data.job_title ? data.job_title : ''}">
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <label for="uname" class="ml-3 col-form-label">证书附件：</label>
                                                        <div class="col-sm-10 file-show">
                                                            <input type="file" class="cert-file-upload">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <b>继续教育情况：</b>
                                                    <div class="pull-right">
                                                        <a href="javascript:void(0);" class="add-jx-btn">+添加</a>
                                                    </div>
                                                    <div class="all-jx">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                </div>`;
        return html;
    }

    function showCol4ObjArray(arr, col, key, showKey) {
        if (!col) return '';
        const obj = _.find(arr, { [key]: col });
        return obj ? obj[showKey] : '';
    }
});