dcat admin自定义form添加省市县联动选择

本文旨在熟悉Dcat Admin中自定义form组件，这个省市县区已有相应的插件了。和插件不同的是，提交到数据库保存时，只需要一个字段，且直接保存省市县区的名称而不是key。

方法记录如下：

一、app/Admin/Extensions目录中新建Ssxq.php:

namespace App\Admin\Extensions;

use Dcat\Admin\Form\Field;

class Ssxq extends Field
{
    protected $view = 'admin.ssxq';
}

二、app/Admin/bootstrap.php中引用js并注册组件

    use App\Admin\Extensions\Ssxq;
    // 注册ssxq联动前端组件别名
    Admin::asset()->alias('@ssxq', [
        'js' => ['/vendor/ssxq/distpicker.js']
    ]);
    Form::extend('ssxq', Ssxq::class);

三、 将js文件放public/vendor/ssxq目录：

文件可github搜索distpicker.js下载。

四、 建立模板/resources/views/admin目录下ssxq.blade.php:

<div class="{{$viewClass['form-group']}}">

    <label class="{{$viewClass['label']}} control-label">{{$label}}</label>

    <div class="{{$viewClass['field']}}">

        @include('admin::form.error')

        <div {!! $attributes !!} style="width: 100%; height: 100%;">
            <select name="province{{$name}}"></select>&nbsp;
            <select name="city{{$name}}"></select>&nbsp;
            <select name="district{{$name}}"></select>
        </div>

        <input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" />
        @include('admin::form.help-block')
    </div>
</div>

<script require="@ssxq" init="{!! $selector !!}">
Dcat.ready(function () {
    var old = "{{ $value }}";//赋值
    if(old)var oldsz = old.split("_");
    $this.distpicker({
        province: old ? oldsz[0] : '---- 所在省 ----',
        city: old ? oldsz[1] : '---- 所在市 ----',
        district: old ? oldsz[2] : '---- 所在区 ----',
        autoSelect: false,
    });
    
    //因提交时赋值，第一次不成功，第二次才正确赋值，因此只能监听select
    $("select[name='district" + "{{$name}}" + "']").on('change',() => {
        var province = $("select[name='province" + "{{$name}}" + "']").val();
        var city = $("select[name='city" + "{{$name}}" + "']").val();
        var district = $("select[name='district" + "{{$name}}" + "']").val();
        var nr = old ? old : '';
        if(province && city && district){
            var nr = province + '_' + city + '_' + district;
        }
        $this.parents('.form-field').find('input[name={{ $name }}]').val(nr);
	});

});
</script>

五、使用方法：

$form->ssxq('beizhu');

走过的弯路，在form提交时赋值，虽然成功改变了input值，但数据已在赋值前提交了后台，导致修改不成功。

$("form").find('[type="submit"],.submit').click(function (e) 

所以后来采用监听select的方法，解决了这个问题。

2021.3.28发现，这个组件在网页初次加载时，总是不成功，最后发现是Dcat.ready的原因，将这个删除就可以了。