PHPackages                             quansitech/cus-form - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. quansitech/cus-form

ActiveLibrary

quansitech/cus-form
===================

qscmf cus-form

v3.0.2(2y ago)5667↓100%6[12 PRs](https://github.com/quansitech/qs-cusform/pulls)MITJavaScriptPHP >=7.2.0

Since May 19Pushed 2y ago3 watchersCompare

[ Source](https://github.com/quansitech/qs-cusform)[ Packagist](https://packagist.org/packages/quansitech/cus-form)[ RSS](/packages/quansitech-cus-form/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (3)Versions (70)Used By (0)

qs-cusform 自定义表单
================

[](#qs-cusform-自定义表单)

提示: v2版与v1无法平滑升级，v2版会废弃v1的数据表（不会删除），请确认数据无需继承的场景下再执行升级操作 [v1版本文档](https://github.com/quansitech/qs-cusform/blob/master/README_v1.md)

v2版本是基于[alibaba/formily](https://github.com/alibaba/formily)和[alibaba/designable](https://github.com/alibaba/designable)开发的零代码自定义表单扩展，大大简化原来designable对于用户不优化的操作界面，仅留下必须的部分组件和控制选项，降低用户的使用和学习门槛，并与qscmf无缝整合。

效果图
---

[](#效果图)

[![](https://raw.githubusercontent.com/quansitech/files/master/qscusform1.png)](https://raw.githubusercontent.com/quansitech/files/master/qscusform1.png)

用法
--

[](#用法)

### 1.安装及执行迁移

[](#1安装及执行迁移)

```
composer require quansitech/cus-form
php artisan migrate
```

### 2. 配置

[](#2-配置)

在根目录的PackageConfig.php文件添加配置项，配置项说明看注释

```
'cusform' => [
    'form_description'=>true, //默认false ， true表示开启表单描述字段
    'ue_extra_attr'=>'data-url="/Public/libs/ueditor/php/controller.php?oss=1&type=image"' // 自定义ueditor组件的extra_attr参数
    'force_delete' => true, //默认为false,表示存在用户提交的表单内容则禁止删除，true表示不做删除检测
    'jsOptions' => [
        'urlPrefix' => '', //一般不用填写，如采用了非规则的网站前缀（如 https://qscmf.test/project1），需要显式添加
        'area' => [
            'url' => '', //地区组件获取地区数据的api，一般不用填写，如需要自定义获取api，可通过填写覆盖默认的api
        ],
        'upload' => [
            'uploadTo' => 'oss',//设置图片存储方式，可选项：oss、tos、cos、server
            'hashCheck' => false, //是否开启查重 默认true
            'wasmUrl' => 'http://qsproject.test/Public/libs/oss/wasm/md5.wasm', //指定计算md5的wasm文件地址，默认当前域名/Public/cusform/*****.wasm
            'action' => '' //上传地址，默认请求组件提供的上传接口，如需自定义可修改
        ]
    ]
]
```

### 3.表单管理页

[](#3表单管理页)

地址 http://\[host\]:\[port\]/admin/Form/index

API说明
-----

[](#api说明)

- CusForm

    方法说明参数返回值类型getInstance生成CusForm实例对象formSchema自定义表单的jsonSchema字符串int form\_id 表单主键stringgetApplySchema获取用户提交的表单数据int apply\_id 用户数据的主键id
    string mode edit(可编辑)|readonly (只读)stdClass json对象类型editApply编辑用户提交的表单数据int apply\_id 用户数据的主键id
    stdClass post\_object 提交字段的json对象\[flag, error\]
    falg为true或者false
    false时error保存出错信息submitApply新增用户提交的表单数据int form\_id 自定义表单主键id
    stdClass post\_object 提交的字段json对象\[res, error\]
    res 如果是false error保存出错信息
    否则 res 返回 apply\_idgetApplyRecord获取用户填写记录int apply\_id 用户数据主键idarray 内容索引数组
    `[ 0 => { component_type: 'input', title：'标题', value: '1234'} ]`
- Builder

    方法说明参数返回值类型\_\_contruct构造函数Object json\_schema的json对象无build生成新的json\_schema的json对象stdClassaddBefore在自定义表单前插入字段组件BaseComponent 组件对象thisaddAfter在自定义表单后插入字段组件BaseComponent 组件对象this
- BaseComponent

    方法说明参数返回值类型\_\_construct构造函数string sign 字段标识value设置组件的值string | stdClass | array | number valuethistype组件值类型string typethistitle标题string titlethisrequired必填bool required 默认值truethisdescription说明string descriptionthisdefault默认值string | stdClass | array | number defaultthisvalidator验证器string validator
    可选项： email、enum、idcard、integer、number
    、phone、required、urlthisenum数据源array enum
    \[\[ 'label' => '1分', 'value' => 1\],\[ 'label' => '2分', 'value' => 2\]\]thisthisvalidate验证array
    \[true, ''\] 验证通过
    \[false, '错误原因'\] 验证失败readonly设置成只读BaseComponent 当前对象build创建组件json\_schemaarray
    \[sign, component\]
    sign: 组件标识
    component: json\_schema
- Input （BaseComponent实现类）

    方法说明参数返回值类型\_\_construct构造函数string sign 组件标识
    string title 组件标题placeholder占位符string placeholder 占位符thisallowClear是否可清空bool allowclear
    true 启用可清空按钮thismaxLength最大长度int maxLengththis
- Radio （BaseComponent实现类）

    方法说明参数返回值类型\_\_construct构造函数string sign 组件标识
    string title 组件标题
- Textarea （BaseComponent实现类）

    方法说明参数返回值类型\_\_construct构造函数string sign 组件标识
    string title 组件标题placeholder占位符string placeholder 占位符thisthisallowClear是否可清空bool allowclear
    true 启用可清空按钮thisshowCount展示字数bool showCountthis
- Text （BaseComponent实现类）

    方法说明参数返回值类型\_\_construct构造函数string title 组件标题 默认为空content设置内容string contentthis
- DatePicker （BaseComponent实现类）

    方法说明参数返回值类型\_\_construct构造函数string sign 组件标识
    string title 组件标题placeholder占位符string placeholder 占位符thisthisallowClear是否可清空bool allowclear
    true 启用可清空按钮thispicker设置展示类型string mode
    year | time | date | month | quarterthisshowTime是否可录入时间bool showthis
- formilyBuilder

    方法说明参数返回值类型\_\_construct构造函数int apply\_id 用户数据的主键id
    stdClass json\_schemasetMode只读|编辑string mode
    readonly | editthissetPostUrl设置表单提交地址
    默认提交到 admin/formApply/editstring urlthishideButton隐藏按钮 默认为不隐藏bool hidethissetReturnUrl设置返回按钮跳转地址string return\_urlthis

自定义验证器
------

[](#自定义验证器)

1. 在Schema\\Validator 新增新的验证类
2. 继承BaseValidator基类
3. 实现validate 和 errorMsg方法, validate负责对数据进行验证， errorMsg返回验证失败时的错误提示

用例
--

[](#用例)

### 1. 后台获取用户提交的表单数据

[](#1-后台获取用户提交的表单数据)

```
$apply_id = 5; //qs_form_apply的主键，是用户提交的内容主键
$mode = 'edit'; //表单模式，edit 编辑  readonly 自读
$schema = CusForm::getInstance()->getApplySchema($apply_id, $mode);
$builder = new FormilyBuilder($apply_id, $schema);
$builder->setMode($mode);

echo (string)$builder;
```

### 2. 生成自定义表单的jsonSchema

[](#2-生成自定义表单的jsonschema)

```
use CusForm\Schema\Builder;
use CusForm\CusForm;

$json = CusForm::getInstance()->formSchema(1);
$builder = new Builder(json_decode($json));
$this->ajaxReturn($builder->build());
```

### 3. 保存表单内容

[](#3--保存表单内容)

```
use CusForm\Helper;
use CusForm\CusForm;

$data = Helper::iJson();
$form_id = (int)$data.form_id;
list($r, $errMsg) = CusForm::getInstance()->submitApply($form_id, $data);
if($r === false){
    $this->ajaxReturn(['status' => 0, 'info' => $errMsg]);
}
else {
    $this->ajaxReturn(['status' => 1, 'info' => '成功']);
}
```

### 4. 生成用户提交的内容 jsonSchema

[](#4-生成用户提交的内容-jsonschema)

```
use CusForm\CusForm;
use CusForm\Schema\Builder;

$apply_id = 5;
$mode = 'readonly';

$json = CusForm::getInstance()->getApplySchema(5, 'readonly');
$builder = new Builder($json);

$this->ajaxReturn($builder->build());
```

### 5. 固定字段与自定义字段结合

[](#5-固定字段与自定义字段结合)

```
use CusForm\CusForm;
use CusForm\Schema\Builder;
use CusForm\Schema\Components\Radio;
use CusForm\Schema\Components\Input;
use CusForm\Schema\Components\Textarea;

$json = CusForm::getInstance()->getApplySchema(5, 'readonly');
$builder = new Builder($json);
$bq1 = new Textarea('bq1', '问题1');
$bq1->maxLength(150)->showCount(true)->required()->default('非常棒了')->readonly();
$builder->addBefore($bq1); //将bq1固定字段添加到表单前

$bq2 = new Input('bq2', '问题2');
$bq2->placeholder('占位符')->allowClear(true)->required()->readonly();
$builder->addBefore($bq2);

$aq1 = new Radio('aq1', '问题3');
$aq1->enum([
    [
        'label' => '1分',
        'value' => 1
    ],
    [
        'label' => '2分',
        'value' => 2
    ],
    [
        'label' => '3分',
        'value' => 3
    ],
    [
        'label' => '4分',
        'value' => 4
    ],
    [
        'label' => '5分',
        'value' => 5
    ]
])->required()->default(5)->readonly();
$builder->addAfter($aq1); //将aq1固定字段添加到表单后
$this->ajaxReturn($builder->build());

```

### 6.前台获取自定义表单

[](#6前台获取自定义表单)

安装扩展

```
npm i @formily/core @formily/react @formily/antd @quansitech/qs-formily antd
```

```
import React from 'react'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
import {
  FormItem,
  DatePicker,
  Checkbox,
  Cascader,
  Editable,
  Input,
  NumberPicker,
  Switch,
  Password,
  PreviewText,
  Radio,
  Reset,
  Select,
  Space,
  Submit,
  TimePicker,
  Transfer,
  TreeSelect,
  FormGrid,
  FormLayout,
  FormTab,
  FormCollapse,
  ArrayTable,
  ArrayCards,
} from '@formily/antd'
import {Card, Slider, Rate, message} from 'antd'
import {Form, Area, Upload} from "@quansitech/qs-formily"

import 'antd/dist/antd.less'

const form = createForm()

const SchemaField = createSchemaField({
    components: {
          Space,
        FormGrid,
        FormLayout,
        FormTab,
        FormCollapse,
        ArrayTable,
        ArrayCards,
        FormItem,
        DatePicker,
        Checkbox,
        Cascader,
        Editable,
        Input,
        NumberPicker,
        Switch,
        Password,
        PreviewText,
        Radio,
        Reset,
        Select,
        Submit,
        TimePicker,
        Transfer,
        TreeSelect,
        Upload,
        Card,
        Slider,
        Rate,
        Area
    },
  })

export const SchedulePage = () => {
    const [ formProps, setFormProps ] = React.useState();
    const [ schema, setSchema ] = React.useState();

    React.useEffect(() => {
        //获取jsonSchema
        fetch('schema').then(res => {
            setFormProps(res.form);
            setSchema(res.schema);
        })
    }, []);

    const handleSubmit = async (data) => {
        //to do submit
    }

    return

          提交}

}
```

开发步骤
----

[](#开发步骤)

node 18.19.0

1. clone 本仓库到本地
2. clone [quansitech/qs-formily (github.com)](https://github.com/quansitech/qs-formily)到js/packages
3. clone [alibaba/formily: Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3 (github.com)](https://github.com/alibaba/formily)将packages改名formilySrc，并移到js文件夹下（仅调试formily的源码时才需要）
4. 在js目录下执行npm i
5. cd js/formily/antd npm run start 进入开发调试模式；npm run build:playground 编译打包js

编译步骤
----

[](#编译步骤)

node 18.19.0

1. clone 本仓库到本地
2. 在js目录下执行npm i
3. cd js/formily/antd npm run build:playground 编译打包js

如何自定义组件
-------

[](#如何自定义组件)

1. 自定义组件分两种情况

    - 组件需要与formitem进行属性映射

        *需要通过 @formily/react 的connect和mapRrops接口进行属性映射，可参考@formily相关文档及@formily/antd 的源码*
    - 无需与formitem属性映射

        定义普通的react组件即可
2. 在js/formily/antd/src/components下新增组件文件夹，增加behavior和resource接口，用于定义组件在designable的展示及预置行为。 如果需要给组件添加固定属性，可以在createResource方法中传入固定属性参数；

    如组件中需要用到Config配置，可定义init方法，并将组件通过addInitComponent注册进初始化列表。
3. 在js/formily/antd/src/schemas添加组件的配置选项
4. 在js/formily/antd/src/locales中添加中英对照
5. 如需要添加自定义属性组件，可在js/formily/setters/src/components下新增组件

v3升级
----

[](#v3升级)

think-core v13升级后，builder的display方法启用，以及上传接口的改变,旧oss模块弃用，改用新的qscmf-formitem-object-storage来代替，v3做了这方便的兼容处理

v3会删除v1的废弃数据表，需要自行处理数据备份。

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community18

Small or concentrated contributor base

Maturity65

Established project with proven stability

 Bus Factor1

Top contributor holds 56.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~23 days

Recently: every ~0 days

Total

58

Last Release

834d ago

Major Versions

v1.5.2 → v2.0.02022-02-21

1.0.x-dev → v2.3.12022-04-21

v2.4.6 → v3.0.02024-01-25

### Community

Maintainers

![](https://www.gravatar.com/avatar/15a0610fee78753bdad92fd45c3506455c0fd45ae51924797b1841d260495a3f?d=identicon)[tiderjian](/maintainers/tiderjian)

![](https://www.gravatar.com/avatar/bb006532a148984f2ee6703cbf4f9830af758d740ef02634d89cc7716485ccd1?d=identicon)[Martin Jack](/maintainers/Martin%20Jack)

---

Top Contributors

[![qq958691165](https://avatars.githubusercontent.com/u/13673962?v=4)](https://github.com/qq958691165 "qq958691165 (22 commits)")[![tiderjian](https://avatars.githubusercontent.com/u/1665649?v=4)](https://github.com/tiderjian "tiderjian (7 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (4 commits)")[![Xhiny](https://avatars.githubusercontent.com/u/35066497?v=4)](https://github.com/Xhiny "Xhiny (3 commits)")[![ericlwd](https://avatars.githubusercontent.com/u/49860861?v=4)](https://github.com/ericlwd "ericlwd (2 commits)")[![1041729157](https://avatars.githubusercontent.com/u/35829078?v=4)](https://github.com/1041729157 "1041729157 (1 commits)")

---

Tags

designableformformilylowcodeqscmf

### Embed Badge

![Health badge](/badges/quansitech-cus-form/health.svg)

```
[![Health](https://phpackages.com/badges/quansitech-cus-form/health.svg)](https://phpackages.com/packages/quansitech-cus-form)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)