Skip to content

S
submodule
Commit 9eebc114 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

temp

parent 881774e7
Hide whitespace changes
Inline Side-by-side
Showing with 317 additions and 18 deletions
components/apolloTable/component/Cell.tsx
View file @ 9eebc114
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { Checkbox, message, Popover } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { config } from './base/config';
import { getEditComponent } from './base';
import { getEditComponent, getFormat, setFormat } from './base';
import s from './Cell.less';
import { CellProps, CellDataProps } from './interface';
import FormHelper from '../utils/formHelper';
......@@ -52,12 +52,13 @@ const Cell = (props: CellProps) => {
setStatus('detail');
}, [cellData]);
const changeCellData = (changedValue: any) => {};
const changeCellData = (changedValue: any, option?: any) => {};
const emitChangeCellData = (changedValue: any, optionValue: any) => {
const temp: CellDataProps[] = [];
cellData.map((item: CellDataProps) => {
temp.push({ text: item.text, value: item.value });
});
if (_.isEqual(temp, changedValue)) {
setStatus('detail');
return;
......@@ -178,9 +179,6 @@ const Cell = (props: CellProps) => {
changeSelectedCell && changeSelectedCell(`${position}_${cellKey}`);
}
}}
// onDoubleClick={() => {
// cellEditable && !readOnlyFlag && setStatus('edit');
// }}
style={style}
>
{rowSelection && columnIndex === 0 && <div className={s.checkbox}>{getCheckbox()}</div>}
......@@ -243,22 +241,32 @@ const Cell = (props: CellProps) => {
};
const selfRenderEditCell = () => {
let editConfig;
let editConfig: any;
if (typeof renderEditCell === 'function') {
editConfig = renderEditCell({ cellData, rowData: record, columnConfig });
} else {
editConfig = config[String(columnType)] || config['1'];
}
const EditComp: any = getEditComponent(editConfig, true);
const EditComp: any = editConfig.cellComp;
const transferColumn = transferAttr(columnType, {
...(config.componentAttr || {}),
...(columnConfig.columnAttrObj || {}),
});
const newProps = {
...(transferColumn || {}),
};
return (
<div className={s.editCell}>
<EditComp
value={cellData}
value={getFormat(editConfig, columnConfig, cellData)}
{...newProps}
columnConfig={columnConfig}
onChange={changeCellData}
onEmitChange={emitChangeCellData}
onEmitChange={(changedValue: any, optionValue: any) => {
const value = setFormat(editConfig, columnConfig, changedValue, optionValue);
emitChangeCellData(value, optionValue);
}}
style={{
minHeight: cellStyle.height,
borderRadius: 0,
......
components/apolloTable/component/base/_utils/transferAttr.tsx
View file @ 9eebc114
......@@ -15,7 +15,7 @@ export const transferAttr = (columnType, columnAttrObj) => {
}
columnAttrObj.precision = precision9;
columnAttrObj.min = columnAttrObj.minValue;
columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength;
columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength - 1 / 10 ** precision9;
break;
case '10':
let precision10;
......@@ -25,7 +25,7 @@ export const transferAttr = (columnType, columnAttrObj) => {
const precision = Number(precision10) - 2;
columnAttrObj.precision = precision > 0 ? precision : 0;
columnAttrObj.min = columnAttrObj.minValue;
columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength;
columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength - 1 / 10 ** precision10;
break;
case '11':
case '20':
......
components/apolloTable/component/base/detail/dateRange/index.tsx
View file @ 9eebc114
......@@ -29,7 +29,7 @@ export const ApolloDateRangeDetail = (props: DateProps) => {
const arr: any[] = [];
formatValue.map((item) => {
arr.push(item.format ? item.format(format) : item);
arr.push(item && item.format ? item.format(format) : item);
});
const dateStr = arr.join('~');
......
components/apolloTable/component/base/edit/date/index.tsx
View file @ 9eebc114
......@@ -11,6 +11,7 @@ export const ApolloDate = (props: any) => {
onChange(date, dateString);
}
};
return null;
return (
<DatePicker
className={styles.date}
......
components/apolloTable/component/base/edit/number/index.tsx
View file @ 9eebc114
......@@ -3,17 +3,35 @@ import { InputNumber } from 'antd';
import styles from './styles.less';
import { ApolloNumberProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import { floatNumberReg, intNumberReg } from '../../../../utils/reg';
export const ApolloNumber = (props: ApolloNumberProps) => {
const { onChange, columnConfig }: any = props;
const { columnAttrObj = {} } = columnConfig;
const { precision, dataType } = columnAttrObj;
const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
const changeValue = (value) => {
const changeValue = (newValue: any) => {
if (dataType === 'INT') {
if (!intNumberReg.test(newValue)) {
return false;
}
}
if (dataType === 'DECIMAL') {
if (!floatNumberReg.test(newValue)) {
return false;
}
}
if (typeof onChange === 'function') {
onChange(value);
onChange(newValue);
}
};
const precision = selfProps.precision || columnAttrObj.precision || 0;
const { onEmitChange, ...o } = selfProps;
return <InputNumber className={styles.number} {...o} precision={precision} onChange={changeValue} />;
return (
<InputNumber
className={styles.number}
{...o}
precision={precision}
onChange={changeValue}
/>
);
};
components/apolloTable/editFormV3/index.less 0 → 100644
View file @ 9eebc114
@import "~@/theme/common";
.wrap {
position: relative;
width: 580px;
.titleCls {
position: absolute;
left: 26px;
width: 520px;
font-size: 16px;
color: @textPrimaryColor;
line-height: 62px;
z-index: 10;
background: #fff;
}
.formItemCls {
padding: 0 45px 0 26px;
max-height: 520px;
min-height: 520px;
overflow-x: hidden;
overflow-y: auto;
border-bottom: 1px solid #ECECEC;
margin: 62px 0 68px;
position: relative;
:global(.ant-form-item-control) {
line-height: 28px;
}
:global(.ant-form-item-required:before){
position: initial;
vertical-align: middle;
}
.titleContainer{
vertical-align: middle;
.colIcon{
width: @textFontGen;
color: @textSupplyColor;
}
.itemTitle{
margin-left: @marginSm;
color: @textPrimaryColor;
}
}
}
.itemCls {
}
.btnCls {
width: 68px;
margin-left: 10px;
}
.buttonWrap {
position: absolute;
bottom: 16px;
right: 45px;
.delBtnCls {
color: @errorColor;
position: relative;
left: -303px
}
}
}
components/apolloTable/editFormV3/index.tsx 0 → 100644
View file @ 9eebc114
/**
* 表单提交：handleSubmit: Function,
*
* 表单取消：handleCancel:Function
*
* 数据回显：mapPropsToFields:Function
*
* 监听表单值发生变化是的回掉：onValuesChange:Function
*
* 样式：propClass：object
* */
import React, { Component } from 'react';
import { Form, Button } from 'antd';
import styles from './index.less';
import { config } from '../component/base/config';
import { transferAttr } from '../component/base/_utils/transferAttr';
import { getFormat } from '../component/base';
import { Provider } from '../component/context';
import { defaultLocale } from '@/submodule/components/apolloTable/locale';
const FormItem = Form.Item;
class FormWrap extends Component {
handleSubmit = (e) => {
e.preventDefault();
e.stopPropagation();
const { rowId, form, handleSubmit } = this.props;
form.validateFieldsAndScroll((err, values) => {
if (!err) {
const result = [];
Object.keys(values).map((el) => {
result.push({
columnCode: el,
cellValueList: values[el],
});
});
handleSubmit({ data: { id: rowId, value: result } });
}
});
};
handleCancel = () => {
const { handleCancel } = this.props;
if (typeof handleCancel === 'function') {
handleCancel();
}
};
handleDelete = () => {
const { rowId, handleDelete } = this.props;
if (typeof handleDelete === 'function') {
handleDelete({ data: { id: rowId } });
}
};
renderLabel = (item) => {
// const { icon } = config[item.columnType];
return (
<span className={styles.titleContainer}>
{/* icon && <div className={styles.colIcon}>{icon}</div> */}
<span className={styles.itemTitle}>{item.columnChsName}</span>
</span>
);
};
renderEditForm = (item) => {
const { getFieldDecorator } = this.props.form;
const { rowData } = this.props;
const {
columnType,
columnName,
columnAttrObj,
value,
renderEditForm,
readOnlyFlag,
rules = [],
validateFirst = true,
validateTrigger = 'onChange',
} = item;
let detailConfig: any;
if (typeof renderEditForm === 'function') {
detailConfig = renderEditForm({ cellData: value, rowData, columnConfig: item });
} else {
detailConfig = config[String(columnType)] || config['1'];
}
const EditComp: any = detailConfig.editComp;
const newProps = {
...(detailConfig.componentAttr || {}),
...(columnAttrObj || {}),
};
const transferColumn = transferAttr(columnType, newProps);
// if(item.columnName==='emails'){
// debugger
// }
return (
<FormItem key={columnName} label={this.renderLabel(item)}>
{getFieldDecorator(columnName, {
validateFirst,
validateTrigger,
rules: [{ required: !!item.requiredFlag }, ...rules],
// initialValue: getFormat(detailConfig, item, value),
})(<EditComp {...transferColumn} columnConfig={item} disabled={readOnlyFlag} />)}
</FormItem>
);
};
getContext = () => {
const { locale } = this.props;
if (locale) {
if (locale.context) {
if (locale.lang && defaultLocale[locale.lang]) {
return { ...defaultLocale[locale.lang], ...locale.context };
}
return locale.context;
}
}
return defaultLocale.cn;
};
render() {
const { loading, isShowDelBtn, data, btnWrapStyle, name, colsNum } = this.props;
return (
<Provider value={{ locale: this.getContext() }}>
<div className={styles.wrap}>
<p className={styles.titleCls}>{name || '客户跟进'}</p>
<div
id="gotop"
className={styles.formItemCls}
ref={(r) => {
this.wrapDom = r;
}}
>
<Form onSubmit={this.handleSubmit} layout="vertical">
{data.map((item: any, i: number) => {
return (
<div
className={styles.item}
style={{
width: `${100 / colsNum}%`,
marginLeft: colsNum > 1 && i % colsNum === 0 ? '-50px' : 0,
paddingLeft: colsNum > 1 ? '50px' : 0,
}}
>
{this.renderEditForm(item)}
</div>
);
})}
</Form>
</div>
<div className={styles.buttonWrap} style={btnWrapStyle}>
<div style={{ display: 'flex', justifyContent: 'center' }}>
{isShowDelBtn ? (
<Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
删除
</Button>
) : null}
<Button onClick={this.handleCancel} className={styles.btnCls}>
取消
</Button>
<Button
onClick={this.handleSubmit}
type="primary"
className={styles.btnCls}
loading={loading}
id="submitBtn" // 用于业务监听此dom节点
>
确定
</Button>
</div>
</div>
</div>
</Provider>
);
}
}
function mapPropsToFields(props) {
const returnObj = {};
const { data, renderEditForm, rowData } = props;
data.forEach((el) => {
// let detailConfig: any;
// if (typeof renderEditForm === 'function') {
// detailConfig = renderEditForm({ cellData: el.value, rowData, columnConfig: el });
// } else {
// detailConfig = config[String(el.columnType)] || config['1'];
// }
// const formatValue = getFormat(detailConfig, el, el.value);
// console.log('formatValue',formatValue)
returnObj[el.columnType] = Form.createFormField({
value: el.value,
});
});
return returnObj;
}
function onValuesChange(props, changedValues, allValues) {
if (props.changeValue) {
props.changeValue(changedValues, allValues);
}
}
export default Form.create({ name: 'form_view', mapPropsToFields, onValuesChange })(FormWrap);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment