unita-techui-snippets

基于 unita + techui 常用的代码模板，可以快速生成页面，组件，路由等模块代码。

模板格式

{
  "unita-xxx": {
    "scope": "javascript,typescript,typescriptreact",
    "prefix": "unita-xxx",
    "body": ["console.log('模板代码')"],
    "description": ""
  }
}

现有模板

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>
  );
};

unita-modal-form

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>
  );
};

unita-add-or-update-form

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>
  );
};

unita-drawer-form

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}
/>

unita-proform-select

<ProFormSelect
  label="${1:名称}"
  name="${2:name}"
  // mode="multiple"
  rules={[{ required: true, message: '请选择${1:名称}' }]}
  initialValue={null}
  valueEnum={{}}
  request={async () => {
    return [];
  }}
/>

unita-proform-digit

<ProFormDigit
  label="${1:名称}"
  name="${2:name}"
  initialValue={null}
  rules={[{ required: true, message: '请输入${1:名称}' }]}
  fieldProps={{ precision: 1 }}
  min={1}
  max={10}
/>

unita-proform-date

<ProFormDatePicker
  label="${1:名称}"
  name="${2:name}"
  rules={[{ required: true, message: '请选择${1:名称}' }]}
  initialValue={null}
  fieldProps={
    {
      // disabledDate: (date) => {
      //   return date.isBefore(Date.now(), 'day');
      // },
    }
  }
/>

unita-proform-daterange

<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');
    // },
  }}
/>

unita-proform-datetime

<ProFormDateTimePicker
  label="${1:名称}"
  name="${2:name}"
  rules={[{ required: true, message: '请选择${1:名称}' }]}
  initialValue={null}
  fieldProps={
    {
      // disabledDate: (date) => {
      //   return date.isBefore(Date.now(), 'day');
      // },
    }
  }
/>

unita-proform-datetimerange

<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"
/>