Initial commit，修正

2025-07-13 19:37:38 +08:00
parent 38ce288e27
commit 65bbd06981
12384 changed files with 3985464 additions and 8 deletions
@@ -0,0 +1,193 @@
+<?php
+#
+# @Author: fm453
+# @Date:   2024/7/18
+# @updated: 上午2:41
+# @Email: 1280880631@qq.com
+use yii\helpers\Html;use yii\helpers\Url;
+
+$_csrf_backend = Yii::$app->request->csrfToken;
+//Yii::$app->getRequest()->getCsrfToken();
+?>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/bootstrap-table.min.css">
+<?=Html::jsFile('@web/js/plugins/vue/vue-3.4.32.global.js')?>
+<!--<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/bootstrap-table.min.js"></script>-->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/bootstrap-table-vue.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
+
+<div class="wrapper wrapper-content">
+    <div class="row">
+        <div class="col-sm-12">
+<div id="app">
+    <div id="toolbar">
+        <button id="remove" class="btn btn-danger" disabled>
+            <i class="fa fa-trash"></i>
+        </button>
+        <button id="add" class="btn btn-primary">
+            <i class="fa fa-plus"></i>
+        </button>
+    </div>
+    <bootstrap-table
+            data-toolbar="#toolbar" data-locale="zh-CN"
+
+            :columns="columns" :data="datas" :options="options">
+    </bootstrap-table>
+</div>
+        </div>
+    </div>
+</div>
+
+<script>
+    function getData(url){
+        var _data = {
+            '_csrf-backend': "<?=$_csrf_backend ;?>"
+        }
+        return fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+                // 'Content-Type': 'application/x-www-form-urlencoded'
+            },
+            body: JSON.stringify(_data)
+        })
+            .then(
+                function(res){
+                    if(res.ok) {
+                        return res.json();
+                    }else{
+                        throw new Error('网络连接出现问题.');
+                    }
+                }
+            )
+            .then(
+                function(data){
+                    return data;
+                }
+            )
+            .catch(error => console.error('Error:', error));
+    }
+
+    const { createApp, ref } = Vue
+    function _setUp(){
+        const columns = ref([
+            {
+                field: 'state',
+                checkbox: true
+            },
+            {
+                title: 'ID',
+                field: 'id'
+            },
+            {
+                field: 'title',
+                title: '标题'
+            },
+            {
+                field: 'des',
+                title: '代码'
+            },
+            {
+                field: 'action',
+                title: '操作',
+                align: 'center',
+                formatter () {
+                    return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
+                },
+                events: {
+                    'click .like' (e, value, row) {
+                        alert(JSON.stringify(row))
+                    }
+
+                }
+            }
+        ])
+        const url = "<?=Url::toRoute(['json'])?>"
+        const test_data = [
+            {
+                id: 0,
+                name: 'Item 0',
+                price: '$0'
+            },
+            {
+                id: 1,
+                name: 'Item 1',
+                price: '$1'
+            },
+            {
+                id: 2,
+                name: 'Item 2',
+                price: '$2'
+            },
+            {
+                id: 3,
+                name: 'Item 3',
+                price: '$3'
+            },
+            {
+                id: 4,
+                name: 'Item 4',
+                price: '$4'
+            },
+            {
+                id: 5,
+                name: 'Item 5',
+                price: '$5'
+            }
+        ]
+        const options = ref({
+            search: true,
+            //搜索
+            showColumns: true,
+            //列标题
+            showColumnsToggleAll:true,
+            //一键筛选全部列
+            showColumnsSearch:true,
+            //筛选列时可搜索列名
+            showRefresh: true,
+            //刷新
+            showToggle: true,
+            //切换卡片视图
+            showExport:true,
+            //导出
+            showSearchClearButton:true,
+            //搜索框可清空
+            showFullscreen:true,
+            // 全屏
+            showFooter:true,
+
+        })
+
+        var datas = [];
+        datas = test_data
+
+        return {
+            columns,
+            test_data,
+            url,
+            options,
+            datas,
+        }
+    }
+    const app = createApp({
+        setup () {
+            return _setUp();
+        },
+        mounted(){
+            //此处可以使用this.来获取上面setup处理的一些数据
+            console.log(BootstrapTable.methods);
+            var _t = this;
+            getData(_t.url).then(
+                function(data){
+                    console.log(_t.datas);
+                    _t.datas = data.rows;
+                    console.log(_t.datas);
+                }
+            )
+        }
+    })
+
+    app.component('BootstrapTable', BootstrapTable)
+    app.mount('#app')
+    var a = app.config;
+    // console.log(a);
+</script>