unita-techui-snippets
基于 unita
+ techui
常用的代码模板,可以快速生成页面,组件,路由等模块代码。
模板格式
{
"unita-xxx": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "unita-xxx",
"body": ["console.log('模板代码')"],
"description": ""
}
}
现有模板
模板名称 |
快捷 prefix |
介绍 |
空页面 |
unita-page |
空页面 |
空组件 |
unita-component |
空组件 |
CRUD 页 |
unita-crud-page |
CRUD 查询页 |
新增修改弹框 |
unita-add-or-update-modal |
新增修改弹框 |
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 |
请求接口 |
Feedback |
unita-Feedback |
快速搭建的 反馈组件 |
H5Robot |
unita-H5Robot |
快速搭建的 网页机器人 |
IicAvataCard |
unita-IicAvataCard |
快速搭建的 头像组件 |
IicClassifyTree |
unita-IicClassifyTree |
快速搭建的 部门树组件 |
IicCropImageUpload |
unita-IicCropImageUpload |
快速搭建的 图片上传裁剪组件 |
IicDeptTreeSelect |
unita-IicDeptTreeSelect |
快速搭建的 通用部门搜索组件 |
IicDragableTree |
unita-IicDragableTree |
快速搭建的 拖动排序树组件 |
IicEmpCircle |
unita-IicEmpCircle |
快速搭建的 选人组件 |
unita-page
import { PageContainer } from '@alipay/tech-ui';
// import './style.less';
export default () => {
return (
<PageContainer
ghost
header={{
title: '标题',
}}
>
{null}
</PageContainer>
);
};
unita-component
import React from '@ali/unita/react';
interface Props {
value: React.Key;
}
export default function Component(props: Props) {
const { value } = props;
return <div>value is: {value}</div>;
}
unita-crud-page
import { Button, Checkbox, Typography } from '@ali/unita/antd';
import type { ProColumns } from '@alipay/tech-ui';
import { PageContainer, ProTable } from '@alipay/tech-ui';
import AddOrUpdateModal from './components/AddOrUpdateModal';
const { Link } = Typography;
type TableListItem = Partial<{
name: string;
code: number;
}>;
export default () => {
const columns: Array<ProColumns<TableListItem>> = [
{
title: '名称',
width: 180,
ellipsis: true,
dataIndex: 'name',
formItemProps: {
name: 'searchParam',
},
fieldProps: {
placeholder: '请输入名称',
},
},
{
title: '类型',
width: 180,
dataIndex: 'type',
valueType: 'select',
},
{
title: '备注',
width: 180,
dataIndex: 'remark',
hideInSearch: true,
},
{
title: '操作',
fixed: 'right',
width: 180,
key: 'option',
valueType: 'option',
render: (_text, record) => {
return [
<AddOrUpdateModal trigger={<Link key="edit">编辑</Link>} data={{ name: '1', code: 1 }} />,
<Link key="status" onClick={() => {}}>
删除
</Link>,
];
},
},
];
return (
<PageContainer
ghost
content={<div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.06)' }} />}
>
<ProTable<TableListItem>
size="large"
scroll={{ x: 'scroll' }}
columns={columns}
request={async (params) => {
return {
success: true,
};
}}
dataSource={[{ name: '1' }]}
options={false}
pagination={{
pageSizeOptions: [10, 30, 50, 100],
defaultPageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
}}
toolbar={{
title: (
<Checkbox onChange={() => {}}>
<a>显示停用</a>
</Checkbox>
),
actions: [
<Button type="primary" ghost onClick={() => {}}>
停用
</Button>,
<AddorUpdateModal
trigger={
<Button type="primary" ghost>
新增
</Button>
}
/>,
],
}}
search={{
defaultCollapsed: false,
}}
/>
</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 { Col, Row } from '@ali/unita/antd';
import { ModalForm, ProFormSelect, ProFormText } from '@alipay/tech-ui';
interface Props {
trigger: JSX.Element;
data?: any;
}
export default (props: Props) => {
const { trigger, data } = props;
const isEdit = data.id;
return (
<ModalForm
layout='horizontal'
modalProps={{
destroyOnClose: true,
}}
title={isEdit ? '编辑' : '新增'}
onOpenChange={(open) => {
console.log(open);
}}
colon={false}
trigger={trigger}
onFinish={async (values) => {
console.log(values);
if (isEdit) {
console.log('edit');
} else {
console.log('add');
}
return true;
}}
>
<Row>
<Col span={12}>
<ProFormText rules={[{ required: true }]} width="sm" name="name" label="姓名" />
</Col>
<Col span={12}>
<ProFormSelect
initialValue={12}
rules={[{ required: true }]}
width='sm'
name='name2'
label='类型'
/>
</Col>
</Row>
</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",
hideInMenu: true, // 不在菜单栏显示
menuRender: false, // 隐藏菜单
headerRender: false, // 隐藏Header部分
footerRender: false, // 隐藏Footer部分
}
unita-service
export async function apiServiceName(params: { current?: number; pageSize?: number }) {
return request<API.Result>('/api/path/name', {
method: 'GET',
params,
});
}
unita-Feedback
<Feedback
empCode="${1:工号}"
empName="${2:姓名}"
projectId="${3:projectId}"
websiteId="${4:websiteId}"
visible={visible}
onClose={handleCancel}
onSubmit={onClickSubmit}
uploadApi="${5:uploadApi}"
/>
unita-H5Robot
<H5RobotProvider
appId='${1:appId}'
primaryColor='${2:primaryColor}'
style={{
top: '${3:top}',
right: '${4:right}
width: '${5:width}',
height: '${6:height}',
padding: '${7:padding}',
borderRadius: '${8:borderRadius}',
}}
title='${9:title}'
robotAvatar='${10:robotAvatar}'
robotName='${11:robotName}'
inputPlaceholder='${12:inputPlaceholder}'
autolog={AESPluginAutolog.autolog}
>
<YourLayout />
</H5RobotProvider>
unita-IicAvataCard
<IicAvataCard<IicAvataCardNameSpace.UserType>
type='horizontal'
userInfo={{
empId: '${1:empId}',
lastName: '${2:lastName}',
nickNameCn: '${3:nickNameCn}',
emailAddr: null,
eleEmpId: '${4:eleEmpId}',
deptname: '${5:deptname}',
postname: '${6:postname}',
jobname: '${7:jobname}',
deptTreeName: '${8:deptTreeName}
}}
onLogotChange={() => {
message.info('执行退出操作');
}}
/>
unita-IicClassifyTree
<IicClassifyTree
request={async () => {
const { success, data } = await initTreeService();
console.log('data:', data);
if (success) {
return {
data: IicClassifyTree.traverse(data, 'deptName', 'deptCode', 'childDepts'),
};
}
return { data: [] };
}}
multiple
checkStrictly
value={['G9665', 'H312']}
onChange={(keys) => {
console.log(keys);
}}
/>
unita-IicCropImageUpload
<IicCropImageUpload
aspectRatio={1}
style={{ width: 500 }}
onChange={(fileInfo) => {
message.success('打开控制台查看文件信息!');
console.log('file', fileInfo);
}}
/>
unita-IicDeptTreeSelect
<IicDeptTreeSelect
contextPath="asc"
baseUrl="${4:baseUrl}"
style={{ width: 200 }}
onChange={(value) => console.log('value', value)}
/>
unita-IicDragableTree
<IicDragableTree
expandAll
multiple={false}
treeData={gData}
onChange={(value) => {
console.log('onChange:', value);
}}
onTreeChange={(info) => {
console.log('onTreeChange:', info);
}}
/>
unita-IicEmpCircle
<IicEmpCircle
onChange={(value) => {
console.log('onChange Value: ', value);
}}
baseUrl="${1: baseUrl}"
contextPath="asc"
/>