unita-techui-snippets
基于 unita
+ techui
常用的代码模板,可以快速生成页面,组件,路由等模块代码。
模板格式
{
"unita-xxx": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "unita-xxx",
"body": ["console.log('模板代码')"],
"description": ""
}
}
现有模板
模板名称 |
快捷 prefix |
介绍 |
空白页 |
unita-page |
PageContainer 空白页 |
ProTable 页 |
unita-table |
带默认配置的 Protable 页 |
ModalForm 页 |
unita-modal-form |
快速搭建的 ModalForm 页 |
DrawerForm 页 |
unita-drawer-form |
快速搭建的 DrawerForm 页 |
ProFormText |
unita-proform-text |
基本配置参数 |
ProFormTextArea |
unita-proform-textarea |
基本配置参数 |
ProFormSelect |
unita-proform-select |
基本配置参数 |
ProFormDigit |
unita-proform-digit |
基本配置参数 |
ProFormDatePicker |
unita-proform-date |
基本配置参数 |
ProFormDateTimePicker |
unita-proform-datetime |
基本配置参数 |
ProFormDateRangePicker |
unita-proform-daterange |
基本配置参数 |
ProFormDateTimeRangePicker |
unita-proform-datetimerange |
基本配置参数 |
router 路由 |
unita-router |
路由配置 |
serviece 请求 |
unita-service |
请求接口 |
unita-page
import { PageContainer } from '@alipay/tech-ui';
// import './style.less';
export default () => {
return (
<PageContainer
ghost
header={{
title: '标题',
}}
>
{null}
</PageContainer>
);
};
unita-table
import { Button, Typography } from '@ali/unita/antd';
import { PlusOutlined } from '@ali/unita/icons';
import type { ProColumns } from '@alipay/tech-ui';
import { PageContainer, ProTable } from '@alipay/tech-ui';
const { Link } = Typography;
type TableListItem = Partial<{}>;
export default () => {
const columns: ProColumns<TableListItem>[] = [
{
title: '名称',
width: 180,
ellipsis: true,
dataIndex: 'name',
formItemProps: {
name: 'searchParam',
},
fieldProps: {
placeholder: '请输入名称',
},
},
{
title: '操作',
fixed: 'right',
width: 180,
key: 'option',
valueType: 'option',
render: (_text, record, _, action) => {
return [
<Link key="edit" onClick={() => {}}>
编辑
</Link>,
<Link key="status" onClick={() => {}}>
启用
</Link>,
];
},
},
];
return (
<PageContainer
ghost
header={{
title: '标题',
}}
>
<ProTable<TableListItem>
size="large"
scroll={{ x: 'scroll' }}
columns={columns}
request={async (params) => {
return {
success: true,
};
}}
options={false}
rowKey="id"
pagination={{
defaultPageSize: 10,
showQuickJumper: true,
}}
search={{
defaultCollapsed: false,
}}
toolBarRender={(action) => [
<Button type="primary" icon={<PlusOutlined />} onClick={() => {}}>
添加
</Button>,
]}
/>
</PageContainer>
);
};
import { Button, Form, Input } from '@ali/unita/antd';
import { PlusOutlined } from '@ali/unita/icons';
import { ModalForm, ProFormText } from '@alipay/tech-ui';
const FormItem = Form.Item;
interface Props {
param: string;
}
const layoutConfig = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
export default (props: Props) => {
return (
<ModalForm
width={800}
layout="horizontal"
{...layoutConfig}
modalProps={{
maskClosable: false,
destroyOnClose: true,
}}
title="标题"
trigger={
<Button type="primary" icon={<PlusOutlined />}>
添加
</Button>
}
onFinish={async (values) => {
return true;
}}
>
<FormItem
label="名称"
name="name"
rules={[{ required: true, message: '必填项' }]}
>
<Input />
</FormItem>
<ProFormText
label="年龄"
name="age"
rules={[{ required: true, message: '必填项' }]}
/>
</ModalForm>
);
};
import { Button, Form, Input } from '@ali/unita/antd';
import { PlusOutlined } from '@ali/unita/icons';
import { DrawerForm, ProFormText } from '@alipay/tech-ui';
const FormItem = Form.Item;
interface Props {
param: string;
}
const layoutConfig = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
};
export default (props: Props) => {
return (
<DrawerForm
width={800}
layout="horizontal"
{...layoutConfig}
drawerProps={{
maskClosable: false,
destroyOnClose: true,
}}
title="标题"
trigger={
<Button type="primary" icon={<PlusOutlined />}>
添加
</Button>
}
onFinish={async (values) => {
return true;
}}
>
<FormItem
label="名称"
name="name"
rules={[{ required: true, message: '必填项' }]}
>
<Input />
</FormItem>
<ProFormText
label="年龄"
name="age"
rules={[{ required: true, message: '必填项' }]}
/>
</DrawerForm>
);
};
unita-proform-text
<ProFormText
label="${1:名称}"
name="${2:name}"
fieldProps={{
maxLength: 50,
}}
rules={[{ required: true, message: '请输入${1:名称}' }]}
initialValue={null}
/>
unita-proform-textarea
<ProFormTextArea
label="${1:名称}"
name="${2:name}"
fieldProps={{
maxLength: 300,
showCount: true,
}}
rules={[{ required: true, message: '请输入${1:名称}' }]}
initialValue={null}
/>
<ProFormSelect
label="${1:名称}"
name="${2:name}"
// mode="multiple"
rules={[{ required: true, message: '请选择${1:名称}' }]}
initialValue={null}
valueEnum={{}}
request={async () => {
return [];
}}
/>
<ProFormDigit
label="${1:名称}"
name="${2:name}"
initialValue={null}
rules={[{ required: true, message: '请输入${1:名称}' }]}
fieldProps={{ precision: 1 }}
min={1}
max={10}
/>
<ProFormDatePicker
label="${1:名称}"
name="${2:name}"
rules={[{ required: true, message: '请选择${1:名称}' }]}
initialValue={null}
fieldProps={
{
// disabledDate: (date) => {
// return date.isBefore(Date.now(), 'day');
// },
}
}
/>
<ProFormDateRangePicker
label="${1:名称}"
name="${2:name}"
placeholder={['开始日期', '结束日期']}
initialValue={[,]}
rules={[{ required: true, message: '请选择${1:名称}' }]}
fieldProps={{
style: { width: '100%' },
// disabledDate: (date) => {
// return date.isBefore(Date.now(), 'day');
// },
}}
/>
<ProFormDateTimePicker
label="${1:名称}"
name="${2:name}"
rules={[{ required: true, message: '请选择${1:名称}' }]}
initialValue={null}
fieldProps={
{
// disabledDate: (date) => {
// return date.isBefore(Date.now(), 'day');
// },
}
}
/>
<ProFormDateTimeRangePicker
label="${1:名称}"
name="${2:name}"
placeholder={['开始时间', '结束时间']}
initialValue={[,]}
rules={[{ required: true, message: '请选择${1:名称}' }]}
fieldProps={{
style: { width: '100%' },
// disabledDate: (date) => {
// return date.isBefore(Date.now(), 'day');
// },
}}
/>
unita-router
{
name: "${1:name}",
path: "${2:path}",
component: "Component",
layout: {
hideMenu: true,
hideNav: true,
hideFooter: true,
},
}
unita-service
export async function apiServiceName(params: {
current?: number;
pageSize?: number;
}) {
return request<API.Result>('/api/path/name', {
method: 'GET',
params,
});
}