thinkphp: fastadmin頁面上新增css和js

刘宏缔的架构森林發表於2024-07-31

一,程式碼

fastadmin的前端使用了layui,需要按照layui的寫法去寫

<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">

                    <table class="table table-bordered">
                        <tr><td>id:{$row.id}</td><td>型別:{$row.type_str}</td></tr>
                        <tr><td>{$row.house_title}</td><td>{$row.house_introduction}</td></tr>
                        <tr><td colspan="2">
                            <span id="btn_allow" style="display:{$disp_allow};width:100px;"
                                  onclick="set_house_status_ui(1,{$row.id})"
                                    class="btn btn-success btn-edit btn-disabled" title="編輯">
                                <i class="fa fa-check-circle fa-fw"></i> 透過</span>

                            <span id="btn_deny" style="display:{$disp_deny};width:100px;"
                                  onclick="set_house_status_ui(2,{$row.id})"
                                    class="btn btn-danger btn-del btn-disabled" title="刪除">
                                <i class="fa fa-times-circle fa-fw"></i> 拒絕</span>
                        </td></tr>
                    </table>

                    <div id="myDiv" style="display: none;">
                        <textarea id="reject_text" placeholder="提示使用者的文字資訊"
                                style="width: 580px;height:80px;margin-left: 10px;margin-top: 10px;"></textarea>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<style type="text/css">
.greenStatus {color:#008B45;}
.redStatus {color:#CD0000;}
.yellowStatus {color:#EEB422;}
</style>
<script>
    //返回成功後修改狀態
    function set_view_status(status){
        if (status == 2) {
            document.getElementById('status_str').innerHTML = '稽核拒絕';
            document.getElementById('status_str').setAttribute("class", "redStatus");
            document.getElementById('btn_deny').style.display='none';
            document.getElementById('btn_allow').style.display='';
        }
        if (status == 1) {
            document.getElementById('status_str').innerHTML = '稽核透過';
            document.getElementById('status_str').setAttribute("class", "greenStatus");
            document.getElementById('btn_deny').style.display='';
            document.getElementById('btn_allow').style.display='none';
        }
    }

    //開啟視窗,輸入拒絕使用者的原因
    function reject(status,id) {
        layer.open({
            type: 1,
            area: ['600px', '200px'],
            title: '提示使用者拒絕原因',
            btn: ['確定', '取消'],//按鈕
            content: $('#myDiv'),
            btn1: function(index, layero){
                // 確定按鈕被點選時的處理邏輯
                var text = document.getElementById('reject_text').value;
                //alert('text:'+text);
                set_house_status_func(status,id,text);
                layer.close(index); // 關閉當前彈窗
            },
            btn2: function(index, layero){
                // 可以在這裡關閉彈窗或者執行其他邏輯
                layer.msg('已取消',{
                    time: 1000
                });
                layer.close(index); // 關閉當前彈窗
            }
        });
    }

    //彈出確認的資訊
    function set_house_status_ui(status,id) {

        var status_str='';
        if (status == 1){
            status_str = '確定要透過稽核嗎?';
        } else if (status == 2){
            status_str = '確定要拒絕稽核嗎?';
        }

        Layer.confirm(status_str, {
            btn: ['確認','取消'] //按鈕
        }, function(index){
            layer.close(index);
            if (status == 2) {
                reject(status,id);
            } else {
                set_house_status_func(status,id,'');
            }

            return true;
        }, function(index){
            layer.msg('已取消',{
                time: 1000
            });
            layer.close(index);
            return false;
        });

    }

    //訪問介面,這個介面的功能是設定一條記錄的狀態
    function set_house_status_func(status,id,text) {
        Fast.api.ajax({
            url:'itemdir/item/setstatus',
            data:{
                status:status,
                id:id,
                text:text,
            }
        }, function(data, ret){
            //失敗後回撥
            console.log(data);
            return false;
        }, function(data, ret){
            //成功後回撥
            console.log(data);
            if (ret.msg == 'success'){
                //alert("修改已成功!");
                layer.msg('修改已成功!',{
                    time: 1000
                });
                var status = data.status;
                if (status==2){
                    set_view_status(2);
                } else if (status==1) {
                    set_view_status(1);
                }
            } else {
                //alert("修改失敗!");
                layer.msg('修改失敗!',{
                    time: 1000
                });
            }
            return false;
        });
    }
</script>

二,測試效果,如圖:

thinkphp: fastadmin頁面上新增css和js

相關文章