Dcat-Admin 2.x表单使用select和input进行表单联动一例 前言这个场景是最近在写一个兼职项目的时候用到的一个场景。但是由于select数量太多使用when的话不太合适当前场景。而用自带的load或者loads无法实现正常的赋值，改了各种接口格式不是undefined就是报错。在不想改源码的情况下，使用了当前方法。使用代码示例-以widget form为例$this->select('user_no','用户编号')->options(User::query()->pluck('user_no'，'id'))->script( " $('select[name=\"station_no\"]').on('change',function(e){ var station_no = $(this).val(); $.ajax({ url:'/admin/name_by_no', method:'GET', data:{q:station_no}, success:(res)=>{ console.log('success',res); $('input[name=\"name\"]').val(res.text); }, fail:(err)=>{ console.log('err',err); } }); })" ); $this->text('name','姓名')->readonly(true); 总结通过上述方法，实现了在选中select选项后对text进行赋值的一个演示。

Laravel“高并发”导致数据“统计”异常一例 最近在用Laravel写一个接口，大致逻辑如下：用户请求接口，校验用户传参，取数据库数据，数据处理，用户请求数据次数+1，用户剩余请求次数数据-1，返回数据。最近呢，有用户并发比较高，我在校验完数据后拉取数据库用户数据：$check = User::query()->where('id',$id)->first();......中间省略数据处理$remaining_times = $check->remaining_times-1; $total_times = $check->total_times+1; $check->update(['remaining_times'=>$remaining_times,'total_times'=>$total_times]); return response()->json([......]);根据Log获知，有好几条查询 $remaining_times 和 $total_times 在进行加减以后依然维持原数据。 初步判定为并发导致。当时考虑过用事务处理，悲观锁，乐观锁。 但是出于更方便的处理，最后使用 increment() 和 decrement() 进行处理。事情暂定为这样再观察。谨以此做记录，如果有更好的方法后续再更新或者欢迎大佬们评论讨论。

Laravel-Admin列表筛选后BootStrap-PopOver插件失效 最早的时候用的是 title 进行的气泡提示。发现响应速度慢，样式也不是很好看。于是想起了popover气泡插件。 近日，在优化列表气泡问题的时候，叶子遇到了这样一个问题。首次进入界面。popover正常。 但是在筛选后重载列表的时候。popover就失效了。 检查相关元素，代码未丢失。 于是就只能判断是初始化失效了。 一通搜索的结果，发现有不少append之后popover失效的问题。综合以上判断， 在bootstrap.php中添加如下代码： Admin::script(' (function(){ $("[data-toggle=\'popover\']").popover(); })() ');

Laravel-Admin下使用chartjs模板渲染问题一例 叶子最近在做图表的时候遇到一个问题。挣扎了很久。。。最后的最后才破案。。。 下面直接上代码：后端代码： //>计算起止时间相差月份 $month = $this->count_month($start_time,$end_time); $pay_date = []; for($i=0;$i结尾月份固定为$end_time $pay_date[] = (string)date('Y-m',strtotime($end_time)); 这样返回到前端后格式如下： 这样看来。后端返回数据就正常了。我们来看前端。。。下面第一个版本： <canvas id="linePay" style="width:200px;height:50px;"></canvas> $(function () { var ctx = document.getElementById("linePay").getContext('2d'); var smmyChart = new Chart(ctx, { type: 'line', data: { labels:[ @foreach($pay_dates as $v) {{$v}}, @endforeach ], datasets: [{ label: "收费金额", data: [ @foreach($sum_pay as $v) {{$v}}, @endforeach ], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255,99,132,1)', borderWidth: 1 }, ] }, options: { barPercentage: 1.0, categoryPercentage: 1.0, legend:false, title: { display: false, text: '月收费金额' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks:{ min:0, beginAtZero: true }, }] } } }); }); 这样运行下来。chartjs直接把labels里的年-月当成了减法运算。。。导致了： 接下来一番折腾。是第二版本： <canvas id="linePay" style="width:200px;height:50px;"></canvas> $(function () { var ctx = document.getElementById("linePay").getContext('2d'); var smmyChart = new Chart(ctx, { type: 'line', data: { labels:[ @foreach($pay_dates as $v) {{(string)$v}}, @endforeach ], datasets: [{ label: "收费金额", data: [ @foreach($sum_pay as $v) {{$v}}, @endforeach ], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255,99,132,1)', borderWidth: 1 }, ] }, options: { barPercentage: 1.0, categoryPercentage: 1.0, legend:false, title: { display: false, text: '月收费金额' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks:{ min:0, beginAtZero: true }, }] } } }); }); 以为强制string后可以达到效果。。。结果真的是然并卵。。。最后的最后。。。才突然想起是不是混编不识别这个东西。。。所以有了第三个版本： <canvas id="linePay" style="width:200px;height:50px;"></canvas> $(function () { var ctx = document.getElementById("linePay").getContext('2d'); var smmyChart = new Chart(ctx, { type: 'line', data: { labels:[ @foreach($pay_dates as $v) "{{$v}}", @endforeach ], datasets: [{ label: "收费金额", data: [ @foreach($sum_pay as $v) {{$v}}, @endforeach ], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255,99,132,1)', borderWidth: 1 }, ] }, options: { barPercentage: 1.0, categoryPercentage: 1.0, legend:false, title: { display: false, text: '月收费金额' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks:{ min:0, beginAtZero: true }, }] } } }); }); 运行后： 至此排除问题→_→真真是轮引号的重要性。。。

Laravel-Admin使用Vue给ChartJS动态增加数据 首先需要引入几个JS:<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="/path/to/js/axios.min.js"></script> <script src="/vendor/laravel-admin-ext/chartjs/Chart.bundle.min.js"></script>然后body部分：<div id="app"> <canvas id="myChart" style="width:200px;hegiht:200px;"></canvas> </div>接下来在JS部分：var app = new Vue({ el: '#app', data: { //>定义数据 labels: [], datas: [], }, methods: { draw() { var self = this; axios.get('/admin/test?axios').then(function (res) { //>遍历处理数据 for (var key in res.data.labs) { self.labels.push(res.data.labs[key]); } for (var key in res.data.data) { self.datas.push(res.data.data[key]); } //>开始图表绘制 var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', //>bar为柱状图，line为折线图，还有其他的图表方式，可以按照自己需求，从官方文档中获取更多类型 data: { labels: self.labels, //>x轴标签 datasets: [{ label: "", //>第一个标签 data: self.datas, //>展示数据 backgroundColor: [ //>柱状图背景色，折线图的话就是填充背景色，如果存在多个数据则用数组，单条数据则不需使用数组。 'rgba(255, 99, 132, 0.2)', 'rgba(26,66,230,0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', ], borderColor: [ //>边框颜色 'rgba(255,99,132,1)', 'rgba(26,66,230,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', ], borderWidth: 1 //>边框宽度 }] }, options: { categoryPercentage: 1.0, legend: false, //>是否显示图标顶部图示 title: { //>图标顶部标题显示，可以用来显示一些统计信息之类的 display: true, text: 'this is title' }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ beginAtZero: true, }], yAxes: [{ ticks: { barPercentage: 1.0, beginAtZero: true }, }] } } }); }, function (err) { }) } }, mounted() { }, created() { this.draw(); } })