Appearance
Crud 模版
基本使用
tsx
import { TemplateDesign } from "@yl_lowcode/designer";
export default () => {
return (
<div style={{ width: "100vw", height: "100vh" }}>
<TemplateDesign
moduleName="基础Crud模版"
logo={
<svg viewBox="0 0 24 24" width="26" height="26">
<path
d="M11.5827 15.1068L10.8606 16.7607C10.583 17.3963 9.7033 17.3963 9.42574 16.7607L8.70365 15.1068C8.06105 13.635 6.90441 12.4634 5.46165 11.823L3.47411 10.9408C2.8422 10.6603 2.84221 9.74105 3.47411 9.46057L5.39957 8.60587C6.87943 7.94897 8.05682 6.73401 8.68845 5.21201L9.4199 3.44952C9.69131 2.79547 10.5951 2.79547 10.8665 3.44952L11.5979 5.21203C12.2295 6.73401 13.4069 7.94897 14.8868 8.60587L16.8123 9.46057C17.4441 9.74105 17.4441 10.6603 16.8123 10.9408L14.8247 11.823C13.382 12.4634 12.2253 13.635 11.5827 15.1068Z"
fill="url(#paint0_linear_10292_26851823978966)"
></path>
<path
d="M18.2928 20.3213L18.0897 20.7868C17.9411 21.1275 17.4693 21.1275 17.3207 20.7868L17.1176 20.3213C16.7556 19.4915 16.1036 18.8308 15.29 18.4693L14.6644 18.1913C14.3261 18.041 14.3261 17.5493 14.6644 17.3989L15.255 17.1365C16.0896 16.7657 16.7533 16.0806 17.109 15.2225L17.3175 14.7196C17.4629 14.3691 17.9475 14.3691 18.0929 14.7196L18.3014 15.2225C18.6572 16.0806 19.3209 16.7657 20.1554 17.1365L20.746 17.3989C21.0844 17.5493 21.0844 18.041 20.746 18.1913L20.1204 18.4693C19.3068 18.8308 18.6548 19.4915 18.2928 20.3213Z"
fill="url(#paint1_linear_10292_26851856332236)"
></path>
<defs>
<linearGradient
id="paint0_linear_10292_26851823978966"
x1="3.42917"
y1="3.41769"
x2="20.572"
y2="20.5605"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1e80ff"></stop>
<stop offset="0.58" stop-color="#8a75ff"></stop>
<stop offset="1" stop-color="#F54DAF"></stop>
</linearGradient>
<linearGradient
id="paint1_linear_10292_26851856332236"
x1="3.42917"
y1="3.41769"
x2="20.572"
y2="20.5605"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#8259F5"></stop>
<stop offset="0.58" stop-color="#ea952e"></stop>
<stop offset="1" stop-color="#F54DAF"></stop>
</linearGradient>
</defs>
</svg>
}
businessMaterial={[
{
tag: "xxx",
tagColor: "#FF5A00",
/** 这里以 InputMore 为例 */
component: (props: any) => (
<div style={{ display: "flex", gap: 4, alignItems: "center" }}>
<input
placeholder="请输入"
style={{
border: "1px solid #eee",
padding: "6px 8px",
borderRadius: 4,
}}
{...props}
/>
<svg viewBox="0 0 1024 1024" width="16" height="16">
<path
fill="#999"
d="M704 746.666667V640a42.666667 42.666667 0 0 1 85.333333 0v106.666667H896a42.666667 42.666667 0 0 1 0 85.333333h-106.666667V938.666667a42.666667 42.666667 0 0 1-85.333333 0v-106.666667H597.333333a42.666667 42.666667 0 0 1 0-85.333333h106.666667zM252.885333 298.666667C231.04 298.666667 213.333333 279.552 213.333333 256s17.706667-42.666667 39.552-42.666667h347.562667c21.845333 0 39.552 19.114667 39.552 42.666667s-17.706667 42.666667-39.552 42.666667H252.885333z m-3.968 341.333333C229.290667 640 213.333333 620.885333 213.333333 597.333333s15.914667-42.666667 35.584-42.666666h142.165334c19.626667 0 35.584 19.114667 35.584 42.666666s-15.914667 42.666667-35.584 42.666667H248.917333zM256 469.333333a42.666667 42.666667 0 0 1 0-85.333333h283.818667a42.666667 42.666667 0 1 1 0 85.333333H256z m235.904 426.666667a42.666667 42.666667 0 1 1 0 85.333333H213.333333a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h597.333334a128 128 0 0 1 128 128v443.562666a42.666667 42.666667 0 0 1-85.333334 0V170.666667a42.666667 42.666667 0 0 0-42.666666-42.666667H213.333333a42.666667 42.666667 0 0 0-42.666666 42.666667v682.666666a42.666667 42.666667 0 0 0 42.666666 42.666667h278.570667z"
></path>
</svg>
</div>
),
assets: {
type: "InputMore",
label: "多条输入框",
props: {
placeholder: "请输入",
clearable: true,
},
propsConfig: [
{
type: "Switch",
name: "disabled",
label: "是否禁用",
},
{
type: "Switch",
name: "clearable",
label: "是否允许清除",
},
{
type: "Input",
name: "placeholder",
label: "提示文案",
},
{
type: "Input",
name: "title",
label: "标题",
},
{
type: "Input",
name: "modalplaceholder",
label: "弹框文本提示",
},
{
type: "InputNumber",
name: "max",
label: "最大条数",
},
{
type: "CodeEditor",
name: "onChange",
label: "设置 onChange",
},
],
},
},
]}
jsonSchema={{
type: "Crud",
search: {
column: 3,
schema: [
{
type: "InputNumber",
label: "数字输入框",
props: {
placeholder: "请输入",
allowClear: true,
},
key: "1094ef646e",
name: "1094ef646e",
},
{
type: "Input",
label: "文本框",
props: {
placeholder: "请输入",
allowClear: true,
},
key: "2d97f64264",
name: "2d97f64264",
},
],
},
width: 1000,
title: "用户列表",
keygen: "id",
autoNo: false,
autoQuery: true,
useRefresh: true,
columns: [
{
title: "列1",
dataIndex: "1",
},
{
title: "列2",
dataIndex: "2",
},
{
title: "列3",
dataIndex: "3",
},
{
title: "列4",
dataIndex: "4",
},
{
title: "列5",
dataIndex: "5",
},
{
title: "列6",
dataIndex: "6",
},
],
tools: [
{
label: "新增",
type: "primary",
onClick: null,
bindModal: "<%snap.visible_addUser%>",
onBindModal: "<%() => { store.visible_addUser = true }%>",
bindModalTitle: "新增用户",
onBindModalTitle: '<%() => { store.title = "新增用户" }%>',
},
],
bordered: false,
pageNumAlias: "",
tabs: [],
rowOperations: {
width: 210,
menus: [
{
label: "编辑",
},
{
label: "查看",
},
{
label: "删除",
},
],
},
pagination: true,
pages: {
ad21413880: {
id: "ad21413880",
type: "modal",
name: "addUser",
column: 1,
vertical: true,
width: 500,
schema: [
{
type: "CheckGroup",
label: "多选组",
props: {
disabled: false,
data: [
{
label: "选项1",
value: 1,
},
{
label: "选项2",
value: 2,
},
{
label: "选项3",
value: 3,
},
],
},
key: "e7248c3198",
name: "e7248c3198",
},
{
type: "Input",
label: "单行文本",
props: {
placeholder: "请输入",
clearable: true,
},
key: "1e9ed8045c",
name: "1e9ed8045c",
},
{
type: "TextArea",
label: "多行文本",
props: {
placeholder: "请输入",
clearable: true,
},
key: "be23a959e2",
name: "be23a959e2",
},
],
defaultValue: "<%snap.record%>",
visible: "<%snap.visible_addUser%>",
onClose: "<%() => {\n store.visible_addUser = false;\n}%>",
selectKey: "be23a959e2",
},
},
currentPage: "page",
bindVariables: {
"pages.ad21413880.title": "<%snap.title%>",
},
url: "",
method: "POST",
lessCode:
".module-8adc333556{\n .wraper {\n font-size: 12px;\n &-box {\n width: 100px;\n color: #ff00ff;\n }\n }\n}",
stateCode:
'export const store = create({\n visible_addUser: false,\n title: \'\',\n record: {},\n});\n\n/** 组件渲染完成 */\nexport const init = async () => {\n console.log("组件渲染完成的生命周期");\n};\n\n/** 组件卸载 */\nexport const destroy = async () => {\n console.log("组件卸载生命周期");\n};\n',
}}
onSave={async (v: string) => {
await new Promise((res) => setTimeout(res, 1000));
console.log(v);
}}
/>
</div>
);
};API
| 属性名 | 描述 | 类型 | 默认值 | 是否必需 |
|---|---|---|---|---|
| moduleName | 模型名称 | string | 无 | 否 |