megvii-qdcloud-component v0.0.6

渠道云业务组件

Web project built on React.js + Typescript

Project setup

npm install

Compiles and hot-reloads for development on http://localhost:3000

npm run start

Compiles and minifies for production

npm run build

Usage

• 表单使用

import {ValidationForm} from 'cloud-component'

const [valueObj, setValueObj] = useState<any>({})
const [formValidation, setFormValidation] = useState()

const formConfig = [
    {
      key: 'text',
      value: valueObj.text,
      type: 'text',
      placeholder: "请输入文本信息",
      horizontal: true,
      label: "文本输入",
      required: true,
      clearable: true,
      outerClassName: 'form-item',
      disabled: false,
      rules: [{
        type: 'string',
        required: true,
        message: "不许为空"
      }]
    }]

    function save() {
        formValidation().then(isValid => {
          if (!isValid) {
            console.log("invalid")
          } else {
            console.log("valid")
          }
        })
      }

     function handleChange(obj, key) {
          setValueObj(obj)
     }

      return (
          <>
            <ValidationForm formConfig={formConfig} onChange={handleChange} onValidate={(fn) => {
              setFormValidation(fn)
            }}></ValidationForm>
            <Button type="primary" onClick={save}>保存</Button>
          </>

        )

表单配置说明

rules

attrs

• filter-form 使用规则 ####说明：查询条件

import { FilterForm } from 'cloud-component';

filterConf = [
		{
			name: '操作人',
			type :'input',
			placeholder: '请输入操作人',
			value: '张**',
			onChange : (res) => console.log(res)
		},
		{
			name: '操作类型',
			type :'select',
			selectOpts: [{ value: 0, label: '登陆' }, { value: 1, label: '删除员工组' }],
			value: 1,
			onChange : (res) => console.log(res)
		},
		{
			name: '起止时间',
			type :'dateRange',
			value: new Date(),
			disabledDate: (time) => time > new Date(),
			onChange : (res) => console.log(res)
		},
		{
			name: '时间',
			type :'dateTime',
			value: new Date(),
			onChange : (res) => console.log(res)
		}
	];

return (
  <FilterForm filterFormConf={this.filterConf} />
)

filter-form 配置说明

filterFormConf 参数说明

• PageLayout 使用规则

说明： 页面级布局组件

import { PageLayout, FilterBox, FilterForm } from 'cloud-component';

return (
	<PageLayout className={styles['layout']}>
		<PageLayout.Header>
			<PageLayout.Header.Left title="日志管理" />
				<PageLayout.Header.Right>
					<span>检索结果： 100条</span>
					<Button.Box>
						<Button
							type="primary"
							inverse={true}
						>批量导出
            </Button>
					</Button.Box>
				</PageLayout.Header.Right>
		</PageLayout.Header>
		<PageLayout.Content>
			<PageLayout.Content.Left>
				<FilterBox
					onSearch={() => { }} onReset={() => { }}>
					<FilterForm filterFormConf={this.filterConf} />
				</FilterBox>
			</PageLayout.Content.Left>
			<PageLayout.Content.Right>
				<div> content 部分</div>
			</PageLayout.Content.Right>
		</PageLayout.Content>
	</PageLayout>
)

PageLayout 参数说明

• Layout 上下布局 layout

说明： 页面级布局组件

import { Layout } from 'cloud-component';
const { Header, Content } = Layout;
return (
			<Layout>
				<Header
					total={10000}
					btns={[
						{
							name: "按钮1",
							action: () => {
								alert(1);
							}
						},
						{
							name: "按钮2",
							action: () => {
								alert(2);
							}
						}
					]}
				>
					搜索栏占位
				</Header>
				<Content>
					<Table>
						<Table.Head>
							<Th>抓拍照片</Th>
							<Th>底库照片</Th>
							<Th>姓名</Th>
							<Th>人员类型</Th>
						</Table.Head>
						<Table.Body>
							{recordList.map(item => (
								<Tr key={item.deviceId}>
									<Td>
										<img src={item.snaphopUri} />
									</Td>
									<Td>
										<img src={item.personImage} />
									</Td>
									<Td>{item.personName}</Td>
									<Td>{item.personType}</Td>
									<Td>{item.deviceName}</Td>
								</Tr>
							))}
						</Table.Body>
					</Table>
					<Page
						page={recordListPage}
						onPageChange={pageNum =>
							recordStore.getRecordList({ pageNum, pageSize })
						}
						onPageSizeChange={pageSize =>
							recordStore.getRecordList({ pageNum, pageSize })
						}
					/>
				</Content>
			</Layout>
	);

Layout.Header 参数说明

• FilterBox 使用规则

说明： 页面左侧筛选容器

import { FilterBox } from 'cloud-component';
return (
  <FilterBox onSearch={() => { }} onReset={() => { }}>

	</FilterBox>
)

• 滚动列表使用

import * as React from 'react';
import {Icon} from 'react-x-component'
import {ScrollableList} from "cloud-component";

export default ()=>{
  const {useState, useEffect} = React;
  const [data, setData] = useState([]);
  let [page, setPage] = useState(0);
  let [hasMore, setHasMore] = useState(true);
  let [disabled, setDisabled] = useState(false);

  const config = {
    titleKey:'name',
    subTitleKey:'remark',
    actions:(row)=>{
      return(
        <>
          <Icon name="edit" onClick={()=>handleEdit(row)}/>
          <Icon name="trash" onClick={()=>handleDelete(row)}/>
        </>
      )
    }
  }

  function handleLoad() {
    const init:any = []
    if(page < 4){
      for(let i = page*15; i< (page+1)*15; i++){
        init.push({id:i, name:`工作日${i}`,remark:`${i%2==0?'':'remark'}`})
      }
      setPage(page+1);
      setData(data.concat(init));
    }else{
      setHasMore(false)
    }
  }

  function handleEdit(row) {
    setDisabled(true)
    console.log('edit',row)
  }

  function handleDelete(row){
    console.log('delete',row)
  }

  useEffect(()=>{
    const init:any = [];
    for(let i = 0; i< 15; i++){
      init.push({id:i, name:`工作日${i}`,remark:`${i%2==0?'':'remark'}`});
    }
    setPage(page+1);
    setData(init)
  },[])

  return(
    <ScrollableList config={config} onLoad={handleLoad} data={data} hasMore={hasMore}
                    disabledOthers={disabled}/>
  )
}

滚动列表参数

• 卡片

import * as React from 'react';
import {CardBox} from "cloud-component";

export default () => {

  function handleSearch() {
   console.log('search')
  }

  function handleClick() {
   console.log('click')
  }

  function handleInputChange() {
   console.log('change')
  }

  function handleInputEnter() {
    console.log('enter')
  }

  return (
    <CardBox btnText="新增人员组" text="共100人" searchPlaceholder={'请输入人名'} onClick={handleClick} onSearch={handleSearch}
    onChange={handleInputChange} onEnter={handleInputEnter}/>
  )
}