@bit-sun/business-component 2.0.12 → 2.0.13

package/src/components/sulaQueryTable/index.md

@@ -1,271 +0,0 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 通用查询列表
-  order: 1
-title: sula基础查询表格
-order: 0
----
-
-# BsSulaQueryTable
-
-
-## 基础查询列表
-
-```tsx
-import React, { useEffect, useState } from 'react';
-import { Alert, message, Modal, Tooltip } from 'antd';
-import {BaseQueryTable} from '../../index';
-import moment from 'moment';
-import { request } from 'bssula';
-import { EditOutlined } from '@ant-design/icons';
-import { arrayMoveImmutable } from 'array-move';
-import { ColumnsEdit, handleTextDouble, handleTextDoubleOrId, handleTextOverflow, tableColumnsImage, textIcon, userColumns } from './utils';
-import StatusComponent from './statusComponent';
-
-const statusMap = [
-  {
-    text: '状态一',
-    value: 1
-  },
-  {
-    text: '状态二',
-    value: 2
-  },
-  {
-    text: '状态三',
-    value: 3
-  },
-  {
-    text: '状态四',
-    value: 4
-  },
-]
-
-const remoteDataSource = {
-  url: 'https://randomuser.me/api',
-  method: 'GET',
-  convertParams({ params }) {
-    return {
-      results: 20,
-      ...params,
-    };
-  },
-  converter({ data }) {
-    return {
-      list: data.results.map((item, index) => {
-        return {
-          ...item,
-          id: `${index}`,
-          createUserName: `${item.name.first} ${item.name.last}`,
-          index,
-        };
-      }),
-      total: data.results.length,
-    };
-  },
-};
-export default (props: any) => {
-  const config = {
-    // tagColor: 'red',
-    rowKey: 'id',
-    remoteDataSource,
-    actionsRender: [
-      {
-        type: 'button',
-        props: {
-          children: 'Test',
-          type: 'primary',
-        },
-        action: [
-          () => {
-          },
-        ],
-      },
-    ],
-    // rowSelection: {},
-    fields: [
-      {
-        name: 'qp-payableCode-like',
-        label: '单据编号',
-        field: {
-          type: 'input',
-          props: {
-            placeholder: '请输入',
-            maxLength: 100,
-            allowClear: true,
-          },
-        },
-      },
-      {
-        name: 'qp-payableStatus-eq',
-        label: '状态枚举单选',
-        initialSource: statusMap,
-        field: {
-          type: 'select',
-          props: {
-          }
-        }
-      },
-      {
-        name: 'qp-payableStatus-in',
-        label: '状态枚举多选',
-        initialSource: statusMap,
-        field: {
-          type: 'select',
-          props: {
-            mode: 'multiple',
-          }
-        }
-      },
-    ],
-    columns: [
-      // {
-      //   key: 'index',
-      //   title: '序号',
-      //   width: 200,
-      //   render: ({ record, index }: any) => index + 1,
-      // },
-      {
-        key: 'recordType',
-        title: '标题',
-        render: ({ index, record }: any) => {
-          if (index === 1) {
-            return <span>{record.supplierName}</span>
-          }
-          if (index === 2) {
-            return handleTextDoubleOrId(record.supplierName, record.id)
-          }
-          if (index === 3) {
-            return tableColumnsImage('https://img2.baidu.com/it/u=3149756581,3717945400&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500')
-          }
-          if (index === 4) {
-            return tableColumnsImage('')
-          }
-
-          return <a>{record.id}</a>
-        }
-      },
-      {
-        key: 'payableCode',
-        tableHeadFilterKey: 'qp-payableCode-like',
-        title: '单据编号',
-        render: ({ record, index }: any) => index !== 5 ? handleTextDoubleOrId(record.payableCode, record.id) : record.payableCode,
-      },
-      {
-        key: 'nat',
-        tableHeadFilterKey: 'qp-payableStatus-eq',
-        title: '状态枚举单选',
-        customerFilterOptions: statusMap.map(item => ({
-          label: item.text,
-          value: item.value
-        })),
-      },
-      {
-        key: 'gender',
-        tableHeadFilterKey: 'qp-payableStatus-in',
-        title: '状态枚举多选',
-        customerFilterOptions: statusMap.map(item => ({
-          label: item.text,
-          value: item.value
-        })),
-        customerFilterType: 'checkbox',
-        render: ({ text, record }: { record: any }) => {
-          return <StatusComponent color={1} text={text} />;
-        },
-      },
-      {
-        key: 'createUserName',
-        title: '创建人',
-        showDetailUserInfo: true,
-      },
-      {
-        key: 'payableTime',
-        title: '业务日期',
-      },
-      {
-        key: 'payableAmountLocal',
-        title: '应付金额',
-      },
-      {
-        key: 'realpayAmount',
-        title: '已付金额',
-        render: ({ text, record, table }: any) => {
-          return <ColumnsEdit
-            disabled={record.status}
-            text={text}
-            requestProps={{
-              url: '/fms-ops/pwReceiveNoticeRecord?sorter=desc-createTime',
-            }}
-            record={record}
-            table={table}
-            reqName="residueTotalQuantity"
-            type="number"
-          ></ColumnsEdit >
-        }
-      },
-      {
-        key: 'fpNos',
-        title: '我是过长隐藏',
-        render: (text: any) => handleTextOverflow('我是过长隐藏我是过长隐藏我是过长隐藏我是过长隐藏我是过长隐藏我是过长隐藏'),
-      },
-      {
-        key: 'accountingName',
-        title: '核算主体',
-      },
-      {
-        key: 'operator',
-        title: '操作',
-        fixed: 'right',
-        width: 200,
-        render: [
-          {
-            type: 'link',
-            props: {
-              type: 'primary',
-              children: '编辑',
-            },
-          },
-          {
-            type: 'link',
-            props: {
-              type: 'primary',
-              children: '查看',
-            },
-          },
-          {
-            type: 'link',
-            props: {
-              type: 'primary',
-              children: '修改',
-            },
-          },
-          {
-            type: 'link',
-            props: {
-              type: 'primary',
-              children: '审核',
-            },
-          },
-          {
-            type: 'link',
-            props: {
-              type: 'primary',
-              children: '测试',
-            },
-          },
-        ],
-      },
-    ],
-  };
-
-  return (
-    <div>
-      <BaseQueryTable {...config} needPageHeader={false} />
-    </div>
-  );
-};
-```
-More skills for writing demo: https://d.umijs.org/guide/demo-principle

package/src/components/sulaQueryTable/status-component.less

@@ -1,8 +0,0 @@
-.badgeWarp {
-  display: flex;
-  align-items: center;
-  width: 90px;
-  height: 28px;
-  padding-left: 8px;
-  border-radius: 100px;
-}

package/src/components/sulaQueryTable/statusComponent.tsx

@@ -1,42 +0,0 @@
-/*
- * @Author: your name
- * @Date: 2021-11-08 15:42:35
- * @LastEditTime: 2021-11-08 20:50:15
- * @LastEditors: Please set LastEditors
- * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- * @FilePath: \operation-management-frontend\src\components\Status\index.tsx
- */
-
-import { Badge } from 'antd';
-import styles from './status-component.less';
-
-const StatusComponent = ({ color, text }: any) => {
-  const colorMap: any = new Map([
-    [1, '#64C602'],
-    [10, '#64C602'],
-    [0, '#F48B3E'],
-    [20, '#F48B3E'],
-    [30, '#F48B3E'],
-
-  ]);
-
-  const bgColorMap: any = new Map([
-    [1, '#EFF9E5'],
-    [10, '#EFF9E5'],
-    [0, '#fef4ec'],
-    [20, '#fef4ec'],
-    [30, '#fef4ec'],
-  ]);
-
-  return (
-    <div className={styles.badgeWarp} style={{ background: bgColorMap.get(Number(color)) }}>
-      <Badge
-        color={colorMap.get(Number(color))}
-        style={{ color: colorMap.get(Number(color)) }}
-        text={text}
-      />
-    </div>
-  );
-};
-
-export default StatusComponent;

package/src/components/sulaQueryTable/utils.less

@@ -1,48 +0,0 @@
-.cardContent {
-  font-family: PingFangSC, PingFangSC-Regular;
-}
-
-.user_card_header {
-  // width: 64px;
-  margin-top: -32px;
-  .card_name {
-    // width: 64px;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 20px;
-    color: #000000;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-top: 6px;
-    // text-align: center;
-    // display: inline-block
-  }
-}
-
-.card_company {
-  font-size: 12px;
-  font-weight: 400;
-  color: #848484;
-  line-height: 20px;
-  margin-bottom: 16px;
-}
-.card_detailInfo {
-  font-size: 12px;
-  font-weight: 400;
-  color: #848484;
-  line-height: 20px;
-  margin: 0 0 5px !important;
-}
-.card_department {
-  color: #005CFF !important;
-}
-
-:global {
-  .ant-popover-inner-content {
-    padding: 0px !important;
-  }
-  .ant-card-body {
-    padding: 0px !important;
-  }
-}

package/src/components/sulaQueryTable/utils.tsx

@@ -1,336 +0,0 @@
-import moment from 'moment';
-import React, { useEffect, useState } from 'react';
-import { Tooltip, Badge, Image, Space, Menu, Dropdown, Input, Button, InputNumber, Popover, Card, Avatar } from 'antd';
-import { CloseSquareOutlined, CopyOutlined, DeleteOutlined, EditOutlined, EyeOutlined, SendOutlined, WarningOutlined } from '@ant-design/icons';
-import styles from './utils.less';
-import { request } from 'bssula';
-
-// 带有toptile 清提示 并且会换行的
-export const handleTextDouble = (textOne: string | undefined, textTwo: string | undefined) => {
-  return (
-    <>
-      <div style={{ marginBottom: -8 }}>{textOne}</div>
-      <div >{textTwo}</div>
-    </>
-  );
-};
-
-// 带有toptile 清提示 ...
-export const handleTextLineFeed = (text: string | undefined, width: number = 130) => {
-  return (
-    <Tooltip title={text || '- -'}>
-      <span
-        style={{
-          width: width ? width + 'px' : '130px',
-          display: 'inline-block',
-          position: 'relative',
-          whiteSpace: 'pre-line',
-          top: '5px',
-        }}
-      >
-        {text || '- -'}
-      </span>
-    </Tooltip>
-  );
-};
-
-// 带有toptile 清提示 ...
-export const handleTextOverflow = (text: string | undefined, width: number = 130) => {
-  return (
-    <Tooltip title={text || '- -'}>
-      <span
-        style={{
-          width: width ? width + 'px' : '130px',
-          display: 'inline-block',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          position: 'relative',
-          top: '5px',
-        }}
-      >
-        {text || '- -'}
-      </span>
-    </Tooltip>
-  );
-};
-
-// 处理时间 带时分秒
-
-export const handleTooltip = (text: any, timeTrue?: boolean) => {
-  return (
-    <Tooltip title={timeTrue ? handleCommonTimeRender(text) : text}>
-      {timeTrue ? handleCommonTimeRender(text) : text}
-    </Tooltip>
-  );
-};
-
-// 处理时间 不带时分秒
-export const handleTooltipHours = (text: any, timeTrue?: boolean) => {
-  return (
-    <Tooltip title={timeTrue ? handleCommonTimeRenderHours(text) : text}>
-      {timeTrue ? handleCommonTimeRenderHours(text) : text}
-    </Tooltip>
-  );
-};
-
-/*
-  列表展示缩略图片
-  url 图片 url
-  {
-    width: 图片宽度
-    height: 图片高度
-  }
-*/
-type tableColumnsImageType = {
-  width?: number | string,
-  height?: number | string,
-  [key: string]: any
-}
-
-export const tableColumnsImage = (url?: string,
-  paramsObj?: tableColumnsImageType
-) => {
-  // 测试使用 测试类型缩小 随时可删除 start 
-  const imgHtml = document.querySelector('.ant-image-mask-info')!
-  if (imgHtml) {
-    let str = imgHtml?.innerHTML
-    str = str?.replace("预览", '')
-    imgHtml.innerHTML = str
-  }
-  // 测试使用 测试类型缩小  end 
-
-  return (
-    <>
-      {url ?
-        <div className={`clomnsImg`}>
-          <Image src={url} width='44px' height='44px'  {...paramsObj}  ></Image>
-        </div >
-        : <img width={44} {...paramsObj} src={"https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"}></img>}
-    </>
-  )
-}
-
-type UserColumnsType = {
-  name: string, //用户名
-  department?: string, //部门
-  position?: string, //职位
-  company?: string, //公司
-  avatar?: string; //头像
-}
-export const userColumns = (props: UserColumnsType) => {
-  const { name = '', department, position, company, avatar = '' }: UserColumnsType = props;
-
-
-  return (
-    <Popover placement="bottom" title={null} content={userInfoCard(props)}>
-      <div className='user_columns_warp'>
-        <img src={avatar || "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"}></img>
-        <span>{name}</span>
-      </div>
-    </Popover>
-  )
-}
-
-export function handleCommonTimeRenderHours(text: any, format?: any) {
-  const formatType = format || 'YYYY-MM-DD';
-  return text && moment(text).format(formatType) || '- -';
-}
-
-export function handleCommonTimeRender(text: any, format?: any) {
-  const formatType = format || 'YYYY-MM-DD HH:mm:ss';
-  return text && moment(text).format(formatType) || '- -';
-}
-
-export const userInfoCard = (props: any) => {
-  return (
-    <Card
-      style={{ width: 200 }}
-      cover={
-        <img
-          alt="example"
-          height={90}
-          src={props.avatar || "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"}
-        />
-      }
-    >
-      <div className={styles.cardContent} style={{padding: '0 15px'}}>
-        <div className={styles.user_card_header}>
-          <Avatar style={{border: '2px solid #ffffff'}} size={64} src={props.avatar || "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"} />
-          <div className={styles.card_name}>{props.name}</div>
-          <div className={styles.card_company}>{props.company || 'XXXXX'}</div>
-        </div>
-        <p className={styles.card_detailInfo}>部门: <span className={styles.card_department}>{props.department || 'XXXXX'}</span></p>
-        <p className={styles.card_detailInfo}>职位: {props.position || 'XXXXX'}</p>
-      </div>
-    </Card>
-  );  
-}
-
-interface ColumnsEditInterfave {
-  text?: string
-  record?: any,
-  type?: string,
-  reqName: string,
-  successMessage?: string,
-  urlPathId?: boolean,
-  disabled: boolean,
-  requestProps: {
-    url: string,
-    converter?: Function,
-    method?: string,
-  },
-  [key: string]: any
-}
-/*
-text 当前项
-record 当前行
-table  sula table 的实例
-type  默认 input  可选 number  输入框类型
-inpProps   输入框透传 props
-requestProps {}    bssula 的 request
-reqName  修改数据传给后端的key
-urlPathId  默认 true   会在 requestProps.url 上面 拼接 /:id
-successMessage  默认提示操作成功  可传入 string
-disabled 什么时候禁用   boolean 类型
-*/
-export const ColumnsEdit = (props: ColumnsEditInterfave) => {
-  const {
-    text = '',
-    record,
-    table,
-    type = "input",
-    inpProps = {},
-    requestProps = {
-      url: ''
-    },
-    reqName,
-    urlPathId = true,
-    successMessage = '操作成功',
-    disabled
-  }: ColumnsEditInterfave = props
-  const [visible, setvisible] = useState(false)
-  const [inputValue, setInputValue]: [inputValue: string | number, setInputValue: Function] = useState(text)
-
-
-  const onSubmit = () => {
-    const url = urlPathId ? requestProps.url + `/${record.id}` : requestProps.url
-    request({
-      url: url,
-      method: requestProps.method || 'patch',
-      convertParams: () => {
-        return {
-          ...record,
-          [reqName]: inputValue
-        }
-      },
-      successMessage,
-      converter(ctx: any) {
-        if (requestProps.converter && typeof requestProps.converter === 'function') {
-          requestProps.converter(ctx)
-          return
-        }
-        setvisible(false)
-        table.resetTable()
-      },
-    })
-  }
-
-
-  const menu = (
-    <Menu >
-      <Menu.Item >
-        {
-          type === 'input' && <Input disabled={disabled} onChange={(e: any) => {
-            const v = e.target.value
-            setInputValue(v)
-          }} style={{ width: 170 }} value={inputValue}  {...inpProps} ></Input>
-        }
-        {
-
-          type === 'number' && <InputNumber disabled={disabled} onBlur={(e: any) => {
-            const v = parseFloat(e.target.value)
-            if (!isNaN(v)) {
-              setInputValue(v)
-            }
-          }} style={{ width: 170 }} value={inputValue} {...inpProps} ></InputNumber>
-        }
-      </Menu.Item>
-      <Menu.Divider />
-      <Menu.Item >
-        <div style={{ textAlign: "right", }}>
-          <Space>
-            <Button onClick={() => {
-              setvisible(false)
-
-            }}>取消</Button>
-            <Button type="primary" disabled={disabled} onClick={() => onSubmit()}>确定</Button>
-          </Space>
-        </div>
-      </Menu.Item>
-    </Menu>
-  );
-  return (
-    <div key={record.id}>
-      <Space>
-        {text}
-        <Dropdown visible={visible} overlay={menu} trigger={['click']} placement="bottomLeft">
-          <EditOutlined style={{ color: '#B0B4B7' }} onClick={() => {
-            setvisible(!visible)
-          }} className='cur' />
-        </Dropdown>
-      </Space>
-    </div>
-
-  )
-}
-
-// 带有toptile 清提示 并且会换行的
-export const handleTextDoubleOrId = (textOne: string | undefined, textTwo: string | undefined) => {
-  return (
-    <>
-      <div style={{ color: '#000', marginBottom: -8 }}>{textOne}</div>
-      <span style={{ color: '#848484' }}>ID : {textTwo}</span>
-    </>
-  );
-};
-
-export const textIcon = (type: string | number, text?: string) => {
-  if (!type) return
-  if (type == 1) {
-    return <a className="cloumnsIconA">
-      <EyeOutlined />
-      <span>详情</span></a>;
-  }
-  if (type == 2) {
-    return <a className="cloumnsIconA">
-      <EyeOutlined />
-      <span>查看</span></a>;
-  }
-  if (type == 3) {
-    return <a className="cloumnsIconA">
-      <DeleteOutlined />
-      <span>删除</span></a>;
-  }
-  if (type == 4) {
-    return <a className="cloumnsIconA">
-      <EditOutlined />
-      <span>编辑</span></a>;
-  } if (type == 5) {
-    return <a className="cloumnsIconA">
-      <CopyOutlined />
-      <span>复制</span></a>;
-  } if (type == 6) {
-    return <a className="cloumnsIconA">
-      <CloseSquareOutlined />
-      <span>作废</span></a>;
-  } if (type == 7) {
-    return <a className="cloumnsIconA">
-      <WarningOutlined />
-      <span>终止</span></a>;
-  } if (type == 8) {
-    return <a className="cloumnsIconA">
-      <SendOutlined />
-      <span>{text}</span></a>;
-  }
-};