前端代码

<form id="linkSuppliersCheckAddAccountInfoForm" class="am-form"
    action="app/bl/linkSuppliersCheckAddAccountInfo/completetask/">
    <input type="hidden" name="bizId" id="bizId" /> 
        <input type="hidden" name="uuid" id="uuid" />
        <!-- <input type="hidden" name="suppliersName" id="suppliersName" /> -->
        <input type="hidden" name="csTaskUuid" id="csTaskUuid_hid" />
        <input type="hidden" name="completeStatus" id="completeStatus" />
        
     <section data-am-widget="accordion"
        class="am-accordion am-accordion-gapped" data-am-accordion='{}'
        id="linkSuppliersWorkPlat">
        <dl class="am-accordion-item">
            <dt class="am-accordion-title am-text-left">联系内容</dt>
            <dd class="am-accordion-bd am-collapse">
                <!--联系内容-->
        <div class="am-g am-cf am-padding">
            <div class="c-dt-title am-fl">
                <span>联系人一览信息列表</span>
            </div>
        </div>
            <div class="am-tab-panel am-fade am-in am-active"
                id="tabContactContent">
                <div id="linkSuppliers_admin_wrapper"
                    class="dataTables_wrapper am-datatable am-form-inline dt-amazeui">
                    <div class="am-g">
                        <div class="am-u-sm-12 am-scrollable-horizontal">
                            <table
                                class="am-table am-table-striped am-table-bordered am-table-compact dataTable am-table-centered"
                                id="linkSuppliersCheckAddAccount_admin_dt" role="grid"
                                aria-describedby="bizContactContent_admin_info">
                                <thead>
                                    <tr role="row">
                                        <th class="am-text-nowrap" tabindex="0"
                                            aria-controls="linkSuppliersCheckAddAccount_admin_dt" rowspan="1"
                                            colspan="1" aria-label="联系人">联系人</th>
                                        <th class="am-text-nowrap" tabindex="0"
                                            aria-controls="linkSuppliersCheckAddAccount_admin_dt" rowspan="1"
                                            colspan="1" aria-label="QQ号">QQ号</th>
                                        <th class="am-text-nowrap" tabindex="0"
                                            aria-controls="linkSuppliersCheckAddAccount_admin_dt" rowspan="1"
                                            colspan="1" aria-label="微信号">微信号</th>
                                        <th class="am-text-nowrap" tabindex="0"
                                            aria-controls="linkSuppliersCheckAddAccount_admin_dt" rowspan="1"
                                            colspan="1" aria-label="是否挂靠">是否挂靠</th>    
                                        <th class="am-text-nowrap" tabindex="0"
                                            aria-controls="linkSuppliersCheckAddAccount_admin_dt" rowspan="1"
                                            colspan="1" aria-label="公司地址">公司地址</th>
                                        <th class="am-text-nowrap" tabindex="0"
                                            aria-controls="linkSuppliersCheckAddAccount_admin_dt" rowspan="1"
                                            colspan="1" aria-label="手机">手机</th>
                                        <th class="am-text-nowrap" tabindex="0"
                                            aria-controls="linkSuppliersCheckAddAccount_admin_dt" rowspan="1"
                                            colspan="1" aria-label="手机">联系人账号</th>
                                        <th class="am-text-nowrap" tabindex="0"
                                            aria-controls="linkSuppliersCheckAddAccount_admin_dt" rowspan="1"
                                            colspan="1" aria-label="手机">联系人区域</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <!--查看本次付款确认书或签约信息 -->
                <div class="am-g am-cf am-padding" >
                    <div class="c-dt-title am-fl">
                        <button type="button" class="am-btn am-btn-secondary" id="btnPay" >查看付款确认书</button>
                    </div>
                </div>
                <!-- 联系话述 -->
                <div class="am-g am-cf am-padding">
                    <div class="c-dt-title am-fl">
                        <span>联系话述</span>
                    </div>
                </div>
                <div class="vertical-list am-cf">
                        <textarea class="contactText" rows="5" cols="50" id='contactText' style="100%;" readonly></textarea>
                </div>
                <div id="customerExpressRegister">
                </div>
            </div>
            </dd>
        </dl>
        <dl class="am-accordion-item">
            <dt class="am-accordion-title am-text-left">付款确认书账户信息</dt>
            <dd class="am-accordion-bd am-collapse">
                <!--付款确认书账户信息-->
            <div id="tabPaymentAccountInfo">
                <div class="vertical-list">
                    <div class="am-input-group am-input-group-lg">
                        <span class="am-input-group-label">供应商名称</span> <input type="text"
                            class="am-form-field " id="suppliersName" name="suppliersName" readonly="readonly"
                            maxlength="255" value="" >
                    </div>
                    <div class="am-input-group am-input-group-lg">
                        <span class="am-input-group-label">收款人开户行</span> <input type="text"
                            class="am-form-field " id="openAccountBank" name="openAccountBank"
                            maxlength="255" value="{{openAccountBank}}" >
                    </div>
                    <div class="am-input-group am-input-group-lg">
                        <span class="am-input-group-label">收款人银行账号</span> <input
                            type="text" class="am-form-field " id="suppliersAccount"
                            maxlength="40" name="suppliersAccount" value="{{suppliersAccount}}" >
                    </div>
                    <div class="am-input-group am-input-group-lg">
                        <span class="am-input-group-label">收款人名称</span> <input type="text"
                            class="am-form-field " id="accountName" name="accountName"
                            maxlength="255" value="{{accountName}}" >
                    </div>
                </div>
            </div>
            </dd>
        </dl>
    </section>
</form>
<script type="text/javascript">
    //每个模块都应该提供一个init方法用来进行事件注册什么的
    function linkSuppliersCheckAddAccountInfoAdmin() {
    }// 定义一个类(函数)    
    //为该类(函数)添加一个静态方法extend
    linkSuppliersCheckAddAccountInfoAdmin.extend = function(obj) {
        for ( var a in obj)
            this[a] = obj[a];// 注意:这里的this即linkSuppliersCheckAddAccountInfoAdmin
    }
    linkSuppliersCheckAddAccountInfoAdmin.modal = null;
    linkSuppliersCheckAddAccountInfoAdmin.formId = "linkSuppliersCheckAddAccountInfoForm";
    linkSuppliersCheckAddAccountInfoAdmin.comfirBtnName = "提交";
    linkSuppliersCheckAddAccountInfoAdmin.extend({
        init : function(data) {
            var csTaskUuid = data.csTaskUuid; 
            var completeStatus = data.completeStatus;
            $('#' + linkSuppliersCheckAddAccountInfoAdmin.formId).find('#completeStatus').val(completeStatus);
            if (completeStatus == "1" || completeStatus == "2"){
                linkSuppliersCheckAddAccountInfoAdmin.comfirBtnName = "关闭";
                $("#tabPaymentAccountInfo").find("#openAccountBank").attr("disabled", true);
                $("#tabPaymentAccountInfo").find("#suppliersAccount").attr("disabled", true);
                $("#tabPaymentAccountInfo").find("#accountName").attr("disabled", true);
            }
            // 本次uuid
            var bizId = data.bizId;
            $('#' + linkSuppliersCheckAddAccountInfoAdmin.formId).find('#bizId').val(bizId);
            
            $('#' + linkSuppliersCheckAddAccountInfoAdmin.formId).find('#csTaskUuid_hid').val(csTaskUuid);
            //请求联系话术
            ajax_jsonp(
                    "app/bl/customerServiceHandleCommon/getsaying/",
                    {
                        "csTaskUuid" : csTaskUuid
                    }, function(response) {
                        //ajax请求成功回调
                        if (!response || response.errcode != '0')
                            return;
                        if (response.data) {
                            var value = response.data[0].matterContent;
                            //显示数据到指定区域
                            var element = $('#tabContactContent').find("#contactText").val(value);
                        }
                    }// ajax success function end 
                    , function(response) {
                        //ajax请求失败回调
                    }, "GET");
            
            //定义联系人表格
            var linkmanColumns = autoBuildDtColumns([
                    "relatedPersonName", "qqNumber", "wxNumber",
                    "_anchoredFlagDisplay", "corpAddress",
                    "mobilePhone", "userId", "coreRegionName" ]);
            
            linkSuppliersCheckAddAccountInfoAdmin.dtDefCloums=[];
            
            var linkmanDtConfigs = {
                "columns" : linkmanColumns,
                "ordering" : false,
                "columnDefs" : linkSuppliersCheckAddAccountInfoAdmin.dtDefCloums
            };
            var getLinkmanUrl = "app/bl/customerServiceHandleCommon/getSupplierLinkmanListFactoring/";
            var bizContactContentDt = $('#tabContactContent').find(
                    "#linkSuppliersCheckAddAccount_admin_dt");

            //初始化联系人表格
            linkSuppliersCheckAddAccountInfoAdmin.dt = dtInit(bizContactContentDt, getLinkmanUrl, null,
                    linkmanDtConfigs, true, function() {
                        return {
                            "bizId" : bizId
                        };
                    });
            //绑定查看付款确认书信息按钮
            $("#linkSuppliersCheckAddAccountInfoAdmin").find("#btnPay").on(
                    'click',
                    function() {
                        openModal(
                                "app/bl/confirmationRollbackRecive-info",
                                "confirmationRollbackReciveInfo",
                                "付款确认书信息",
                                {"uuid" : bizId},
                                false);

                    });
            //付款确认书账户信息
            ajax_jsonp(
                    "app/bl/customerServiceHandleCommon/getPaymentAccount/",
                    {
                        "bizId" : bizId
                    },
                    function(response) {
                        //ajax请求成功回调
                        if (!response || response.errcode != '0')
                            return;
                        if (response.data) {
                            var info = response.data[0];
                            //显示数据到指定区域
                            $.each(info,function(key, value) {
                                var element = $('#tabPaymentAccountInfo').find("input[id='"+ key+ "']");
                                if (isNotEmptyDOM(element))$(element).val(value);
                            });
                            if(key = 'openAccountBank'){
                                $("#linkSuppliersCheckAddAccountInfoForm").find("#openAccountBank").val(info.openAccountBank);
                            }
                            if(key = 'suppliersAccount'){
                                $("#linkSuppliersCheckAddAccountInfoForm").find("#suppliersAccount").val(info.suppliersAccount);
                            }
                            if(key = 'accountName'){
                                $("#linkSuppliersCheckAddAccountInfoForm").find("#accountName").val(info.accountName);
                            }
                            //添加供应商名称到指定位置显示
                            if(key = 'suppliersName'){
                                $("#linkSuppliersCheckAddAccountInfoForm").find("#suppliersName").val(info.suppliersName);
                            }
                            
                        }
                    }// ajax success function end 
                    , function(response) {
                        //ajax请求失败回调
                    }, "GET");
        },//init() END
        commit : function() {
            //表单提交处理
            var $form = $("#"
                    + linkSuppliersCheckAddAccountInfoAdmin.formId);
            var $modal = $("#"
                    + linkSuppliersCheckAddAccountInfoAdmin.modalId);
            var openAccountBank = $("#tabPaymentAccountInfo").find("#openAccountBank").val();
            var suppliersAccount = $("#tabPaymentAccountInfo").find("#suppliersAccount").val();
            var accountName = $("#tabPaymentAccountInfo").find("#accountName").val();
            var bizId = $('#' + linkSuppliersCheckAddAccountInfoAdmin.formId).find('#bizId').val();
            if(!isNotBlank(openAccountBank)){
                getAlertInfo("ME403W008");
                return;
            }
            if(!isNotBlank(suppliersAccount)){
                getAlertInfo("ME403W028");
                return;
            }
            if(!isNotBlank(accountName)){
                getAlertInfo("ME403W029");
                return;
            }
            var commitFlag = true;
            var checkFlag = false;
            // 已完成的状态下,直接关闭窗口
            var    completeStatus = $form.find("#completeStatus").val();
            if(completeStatus == "1" || completeStatus == "2"){
                closeModal(linkSuppliersCheckAddAccountInfoAdmin.modal);
                CustomerServiceDeskDetailInfo.reloadDataTable();
                return;
            }
            commitFlag = alertMsg("账户信息确认修改正确,是否提交?",'COMFIR');
            if(commitFlag){
                //提交表单
                commitForm($form, $modal,linkSuppliersCheckAddAccountInfoAdmin,function(response){
                    if (!checkResponseData(response)){
                        return;
                    } 
                    // 关闭模态窗体
                    closeModal(linkSuppliersCheckAddAccountInfoAdmin.modal)
                    // 刷新客服工作台详细信息-相关事项信息列表
                    CustomerServiceDeskDetailInfo.reloadDataTable();
                    // 刷新客服工作台
                    CustomerServiceDesk.dt.draw();
                });
            };
        }//commit() end 
    });
</script>
原文地址:https://www.cnblogs.com/xiaoniuniu886/p/11133700.html