Dcat Admin优秀扩展集锦

牛铁柱

Dcat Admin优秀扩展集锦，也希望大家能把自己喜欢的扩展备忘在这里

仅收集适用于DcatAdmin 2.X的扩展。

扩展名称	用途
Dcat Easy Sku	Sku扩展
dcat-extension-plus	站点配置
form-step	分步表单扩展
dcat-distpicker	省市区表单扩展
Dcat Admin SKU	Dcat Admin SKU扩展增强版
占位	占位
占位	占位
占位	占位
占位	占位

牛铁柱

Dcat Easy Sku

首先感谢前人的肩膀 github.com/jade-kun/sku

该插件是 Dcat Admin 的插件，安装方式遵循 Dcat Admin 官方文档

默认规格带有图片，库存，价格三个属性，可自行添加属性，自行处理

Demo

Laravel

安装

composer 安装

composer require lty5240/dcat-easy-sku

应用商店安装

等待Dcat Admin 上商店

本地安装

下载本项目的zip包，并在Dcat Admin后台插件管理安装

// 不推荐，因为我没试过，也不方便

使用

请移步 github dcat-easy-sku

转载自：https://learnku.com/articles/53163

牛铁柱

dcat-extension-plus 站点配置

为 DcatAdmin 后台添加增强配置的功能。修改过程利用 DcatAdmin 自带的 admin_setting() 方法实现，不会硬编码修改任何 config 文件或者 .env 文件。

下载地址

https://github.com/celaraze/dcat-extension-plus

安装方式

最新支持 Dcat Admin 2.0.18beta

composer require celaraze/dcat-extension-plus

或者在后台扩展中，直接上传本插件的 .zip 文件即可。

使用

在菜单 扩展 中启用扩展后，会自动添加名为 增强配置 的菜单。

功能

站点标题
站点 LOGO
站点微缩 LOGO
站点静态资源 URL
调试模式
语言切换
移除底部授权
头部边距优化
主题色切换
菜单样式切换（默认、分离、水平）
表单行操作按钮固定最右
表单提交内容自动预处理，有效防止 XSS 等攻击手段。
快速创建选项：表单可用 selectCreate() 字段类型，是 select 字段的增强，支持在右侧添加快速创建选项的按钮，异步添加值。

$form->selectCreate('department','部门')
    ->options(Department::class)
    ->ajax('/api/departments')      // 必须使用 api 方式取选项列表，格式同 select 字段的使用方法
    ->url('/departments/create')    // 异步打开的页面，这里是部门创建的页面 url
    ->required();

截图：

牛铁柱

Dcat Admin 分步表单扩展

实现分步表单的效果

截图

下载：

https://github.com/dcat-admin/form-step

使用教程

https://learnku.com/docs/dcat-admin/2.x/step-by-step-form/8111

supersdar

有没有在tailwind中使用dcat admin的教程吗

牛铁柱

省市区表单扩展 dcat-distpicker

github地址：https://github.com/super-eggs/dcat-admin-extensions-distpicker

但是好像用不了了。所以发个能用的。下载即可。

dcat-distpicker-201.zip

217kB

Distpicker是一个中国省市区三级联动选择组件，这个包是基于Distpicker的dcat-admin扩展，用来将Distpicker集成进dcat-admin的表单中，本包参考了laravel-admin-extensions/china-distpicker

截图

安装

首先

composer require super-eggs/dcat-admin-extensions-distpicker

然后

php artisan admin:import dcat-admin-extensions-distpicker

开启扩展

后台开启

使用

表单中使用

比如在表中有三个字段province_id, city_id, district_id, 在form表单中使用它：

$form->distpicker(['province_id', 'city_id', 'district_id']);

设置默认值

$form->distpicker([
    'province_id' => '省份',
    'city_id' => '市',
    'district_id' => '区'
], '地域选择')->default([
    'province' => 130000,
    'city'     => 130200,
    'district' => 130203,
]);

可以设置每个字段的placeholder

$form->distpicker([
    'province_id' => '省',
    'city_id'     => '市',
    'district_id' => '区'
]);

设置label

$form->distpicker(['province_id', 'city_id', 'district_id'], '请选择区域');

设置自动选择, 可以设置1,2,3 表示自动选择到第几级

$form->distpicker(['province_id', 'city_id', 'district_id'])->autoselect(1);

表格筛选中使用

$filter->distpicker('province_id', 'city_id', 'district_id', '地域选择');

地区编码数据

Distpicker所使用的地域编码是基于国家统计局发布的数据, 数据字典为china_area.sql文件.

下一步开发计划

可以自定义调整为一级、二级；

牛铁柱

Dcat Admin SKU扩展增强版

下载地址：https://github.com/Abbotton/dcat-sku-plus
本地下载：

dcat-sku-plus-main.zip

97kB

首先感谢前人的肩膀：https://github.com/lty5240/dcat-easy-sku

以及前人的前人的肩膀：https://github.com/jade-kun/sku

因改动太大，故没有往前面两位大佬的仓库中PR。

如果感觉好用，还请给个`Star`鼓励一下，谢谢 🍻 。

该插件是 Dcat Admin 的插件，安装方式遵循Dcat Admin官方文档。

默认规格带有图片、库存、价格三个属性，可自行添加属性，自行处理。

改进的地方

增加了独立设置相关属性的模块；
增加了多图上传功能；
增加删除图片时操作确认；
增加删除图片时同时删除后端图片；
增加图片上传、删除的URL配置项，不用再去修改js文件中的相关变量；

界面展示

可以独立设置规格属性，默认输入框，支持单选框和复选框。

在表单界面规格名位置选择下拉框中的相关属性或者手动输入，生成SKU相关信息。

插件配置页面可以配置图片上传、删除的URL。

安装

composer安装

composer require abbotton/dcat-sku-plus

应用商店安装

等待Dcat Admin 上商店

使用

// app/Admin/Controllers/ProductController.php

protected function form()
{
    return Form::make(new Product(), function (Form $form) {
        $skuParams = [
            // 扩展第一列
            [
                'name'    => '会员价', // table 第一行 title
                'field'   => 'member_price', // input 的 field_name 名称
                'default' => 5, // 默认值
            ],
            // 扩展第二列
        ];
        // 新增时
        $form->sku('sku', '生成SKU')->addColumn($skuParams);
        
        // 编辑时
        $skuData = []; // 数据结构见附录
        $skuString = json_encode($skuData);
        $form->sku('sku', '生成SKU')->addColumn($skuParams)->value($skuString);
        
        // 获取提交的数据.
        $form->saving(function (Form $form) {
            // 拿到SKU数据，按照业务逻辑做响应处理即可。
            dd($form->input('sku'));
        });
    });
}

附录

最终生成的SKU数据结构，仅供参考

{
  "attrs": {
    "测试": [
      "测试1",
      "测试2"
    ],
    "颜色": [
      "绿",
      "黄"
    ],
    "含电池": [
      "含电池"
    ],
    "内存": [
      "8G"
    ]
  },
  "sku": [
    {
      "测试": "测试1",
      "颜色": "绿",
      "含电池": "含电池",
      "内存": "8G",
      "pic": [
        {
          "short_url": "sku/HjdrG0RpfIwI3kkgpNNFfmxPasgaOLg6bBPOCDxd.jpg",
          "full_url": "http://127.0.0.1:8000/storage/sku/HjdrG0RpfIwI3kkgpNNFfmxPasgaOLg6bBPOCDxd.jpg"
        },
        {
          "short_url": "sku/bkucABLjzRQ5pEHYX0gwdS1VxJrS6ObiQCIWVvIl.png",
          "full_url": "http://127.0.0.1:8000/storage/sku/bkucABLjzRQ5pEHYX0gwdS1VxJrS6ObiQCIWVvIl.png"
        }
      ],
      "stock": "",
      "price": "",
      "member_price": 5
    }
  ]
}

running8

编辑的时候，属性表单只显示第一个属性，可以修改一下 index.js 109行加上：

if(tbody.find(‘tr’).eq(index).length === 0) {

_this.wrap.find('.sku_attr_key_val tbody').append(_this.getHtml())

}

本网站的服务器由提供