Skip to content

W
WebPublic
提交 f03547a3 authored 作者: 王绍森's avatar 王绍森
浏览文件
操作

表格样式修改

上级 5c4a0da1
隐藏空白字符变更
内嵌 并排
正在显示 包含 306 行增加 和 320 行删除
FormInsertDiy/ListWithAddEditTemplate/index.js
浏览文件 @ f03547a3
......@@ -13,337 +13,323 @@ import SearchDom from '@/highOrderComponent/SearchDom';
import StandardTable from '@/components/StandardTable';
import AddOrEditModal from './AddOrEditModal';
import {
fetchTableHeader,
fetchTableData,
addOrEditTableItem,
deleteTableItem,
fetchTableHeader,
fetchTableData,
addOrEditTableItem,
deleteTableItem,
} from '@/webPublic/Services';
import { ModalConfirm } from '@/baseComponent/Modal';
const dateRender = val => val && moment(val).format('YYYY-MM-DD HH:mm:ss');
const dateRender = (val) => val && moment(val).format('YYYY-MM-DD HH:mm:ss');
const getValue = obj =>
Object.keys(obj)
.map(key => obj[key])
.join(',');
const getValue = (obj) =>
Object.keys(obj)
.map((key) => obj[key])
.join(',');
/**
* 展示list数据，
* 根据元数据id显示元数据表格，根据模板id新增或编辑某条数据
*/
class ListWithAddEditTemplate extends React.Component {
static propTypes = {
objId: PropTypes.string.isRequired, // 元数据表id
templateCode: PropTypes.string.isRequired, // 表单模板id
filters: PropTypes.object, // 请求元数据表格时额外的过滤条件
hasImport: PropTypes.bool, // 是否有导入操作按钮，默认false
hasExport: PropTypes.bool, // 是否有导出按钮，默认false
};
static defaultProps = {
filters: {},
hasImport: false,
hasExport: false,
};
constructor(props) {
super(props);
this.state = {
modalVisible: false,
formData: null, // 编辑某行数据时表单的数据
headerList: [], // 表头的数据
searchConfig: [],
formValues: {}, // 搜索区域的数据
isAdd: false, // 是新增还是编辑
selectedRows: [],
primaryKey: null,
// showEdit: false, // 是否显示编辑区域
pageData: {
list: [],
pagination: {},
},
confirmLoading: false,
};
this.columns = [];
}
// 渲染值
componentDidMount() {
const { objId } = this.props;
fetchTableHeader(objId).then(headerList => {
if (!headerList) return;
this.setState({ headerList });
this.columns = headerList
.filter(i => !i.isHidden)
.slice(0, 10)
.map(item => ({
title: item.title,
dataIndex: item.name,
render: date.includes(item.type) && dateRender,
}));
const operation = {
static propTypes = {
objId: PropTypes.string.isRequired, // 元数据表id
templateCode: PropTypes.string.isRequired, // 表单模板id
filters: PropTypes.object, // 请求元数据表格时额外的过滤条件
hasImport: PropTypes.bool, // 是否有导入操作按钮，默认false
hasExport: PropTypes.bool, // 是否有导出按钮，默认false
};
static defaultProps = {
filters: {},
hasImport: false,
hasExport: false,
};
constructor(props) {
super(props);
this.state = {
modalVisible: false,
formData: null, // 编辑某行数据时表单的数据
headerList: [], // 表头的数据
searchConfig: [],
formValues: {}, // 搜索区域的数据
isAdd: false, // 是新增还是编辑
selectedRows: [],
primaryKey: null,
// showEdit: false, // 是否显示编辑区域
pageData: {
list: [],
pagination: {},
},
confirmLoading: false,
};
this.columns = [];
}
// 渲染值
componentDidMount() {
const { objId } = this.props;
fetchTableHeader(objId).then((headerList) => {
if (!headerList) return;
this.setState({ headerList });
this.columns = headerList
.filter((i) => !i.isHidden)
.slice(0, 10)
.map((item) => ({
title: item.title,
dataIndex: item.name,
render: date.includes(item.type) && dateRender,
}));
const operation = {
title: '操作',
render: (_, record) => {
return (
<Fragment>
<a onClick={this.modify.bind(this, record)}>编辑</a>
<Divider type="vertical" />
<a onClick={this.delete.bind(this, record)}>删除</a>
</Fragment>
);
},
};
this.columns.push(operation);
const primaryKey = (headerList.find(i => i.isPrimaryKey) || {}).name;
this.setState({ primaryKey });
const searchConfig = headerList.filter(i => i.isShowQuery).map(item => {
const sear = getFormArrayConfig([item]);
const { required, placeHolder, ...config } = sear[0];
return config;
});
this.setState({ searchConfig, primaryKey });
this.getPage();
});
}
// 新增按钮事件
add = () => {
const { headerList } = this.state;
// const showEdit = headerList.length >= 10;
this.setState({
modalVisible: true,
formData: {},
isAdd: true,
// showEdit,
});
};
// 修改按钮事件
modify = record => {
const recordTemp = { ...record, update_time: Date.now() };
const { headerList } = this.state;
// const showEdit = headerList.length >= 10;
// 把record里明文key改成转换后的key，用于在模板表单中回显
const headerMap = headerList.reduce((acc, header) => ({ ...acc, [header.name]: header }), {});
const formData = Object.keys(recordTemp).reduce(
(acc, key) => {
if (!headerMap[key]) return acc;
return { ...acc, [headerMap[key].base52]: recordTemp[key] };
},
{}
);
this.setState({
formData,
modalVisible: true,
isAdd: false,
// showEdit,
});
};
delete = record => {
ModalConfirm('确定删除？', {
onOk: () => {
const { objId } = this.props;
// 找出主键
const { primaryKey } = this.state;
const Keys = {};
Keys[primaryKey] = record[primaryKey];
deleteTableItem(objId, primaryKey, record[primaryKey]).then(res => {
this.getPage();
});
},
});
};
changeFormData = (value, key) => {
this.setState(({ formData }) => ({ formData: { ...formData, [key]: value } }));
};
getPage = () => {
const { objId, filters = {} } = this.props;
const {
formValues,
pageData: { pagination },
} = this.state;
const query = { ...formValues, ...filters };
const pageNo = pagination.current ? pagination.current : 1;
const pageSize = pagination.pageSize ? pagination.pageSize : 10;
fetchTableData({ dataObjId: objId, query, pageSize, pageNo }).then(res => {
if (!res.rows) {
console.log('分页接口rows返回null报错');
}
this.setState({
pageData: {
list: res.rows,
pagination: {
current: res.pageNo,
pageSize: res.pageSize,
total: Number(res.total),
},
},
});
});
};
handleStandardTableChange = (pagination, filtersArg, sorter) => {
this.setState(
({ pageData }) => ({
pageData: { ...pageData, pagination },
}),
this.getPage
);
};
handleAdd = () => {
const {
objId,
form: { validateFields },
} = this.props;
const { isAdd } = this.state;
validateFields((err, values) => {
if (err) return;
this.setState({ confirmLoading: true });
addOrEditTableItem({ objId, data: values, isAdd }).then(res => {
this.setState({ confirmLoading: false });
if (res === true) {
message.success('操作成功');
this.setState({
modalVisible: false,
});
this.getPage();
} else {
message.error('操作失败');
}
});
});
};
handleModalVisible = () => {
this.setState({
modalVisible: this.state.modalVisible ? false : true,
formData: {},
});
};
handleSelectRows = rows => {
this.setState({
selectedRows: rows,
});
};
batchDelete = e => {
const { selectedRows, primaryKey } = this.state;
const { objId } = this.props;
if (!selectedRows) return;
ModalConfirm('确定删除？', {
onOk: () => {
deleteTableItem(objId, primaryKey, selectedRows.map(row => row[primaryKey])).then(res => {
this.setState({
selectedRows: [],
});
this.getPage();
});
},
});
};
goBack = () => {
router.goBack();
};
formStateChange = (value, key) => {
this.setState(({ formValues }) => ({ formValues: { ...formValues, [key]: value } }));
};
resetFormValues = () => {
this.setState({
formValues: {},
});
};
render() {
const {
modalVisible,
selectedRows,
isAdd,
objId,
pageData,
showEdit,
formData,
primaryKey,
formValues,
searchConfig,
confirmLoading,
} = this.state;
const { hasExport, form, hasImport, templateCode } = this.props;
const addOrEditModalProps = {
handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible,
content: formData,
form,
isAdd,
templateCode,
modalVisible,
confirmLoading,
};
return (
<>
{showEdit ? (
<Edit
id={objId}
recordId={formData[primaryKey]}
recordKey={primaryKey}
returnThis={() => {
this.setState({
showEdit: false,
});
this.getPage();
}}
/>
) : (
<Fragment>
{searchConfig.length > 0 ? (
<SearchDom
formStateChange={this.formStateChange}
formValues={formValues}
getPage={this.getPage}
resetFormValues={this.resetFormValues}
config={{ condition: searchConfig, fromTab: true }}
/>
) : null}
<Shell styleShell={{ marginTop: searchConfig && searchConfig.length ? 16 : 0 }}>
<div style={{ paddingLeft: '10px', marginTop: '20px' }}>
<ButtonDiy icon="plus" className="primaryBlue" handleClick={this.add} name="新建" />
{hasImport && <ImportUtil objId={objId} />}
{hasExport && <ExportInfo objId={objId} />}
<ButtonDiy handleClick={this.batchDelete} name="批量删除" />
</div>
<StandardTable
rowKey="id"
data={pageData}
columns={this.columns}
selectedRows={selectedRows}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
scroll={{ x: 1200 }}
/>
</Shell>
</Fragment>
)}
<AddOrEditModal {...addOrEditModalProps} />
</>
);
}
fixed: 'right',
width: 120,
render: (_, record) => {
return (
<Fragment>
<a onClick={this.modify.bind(this, record)}>编辑</a>
<Divider type="vertical" />
<a onClick={this.delete.bind(this, record)}>删除</a>
</Fragment>
);
},
};
this.columns.push(operation);
const primaryKey = (headerList.find((i) => i.isPrimaryKey) || {}).name;
this.setState({ primaryKey });
const searchConfig = headerList.filter((i) => i.isShowQuery).map((item) => {
const sear = getFormArrayConfig([item]);
const { required, placeHolder, ...config } = sear[0];
return config;
});
this.setState({ searchConfig, primaryKey });
this.getPage();
});
}
// 新增按钮事件
add = () => {
const { headerList } = this.state;
// const showEdit = headerList.length >= 10;
this.setState({
modalVisible: true,
formData: {},
isAdd: true,
// showEdit,
});
};
// 修改按钮事件
modify = (record) => {
const recordTemp = { ...record, update_time: Date.now() };
const { headerList } = this.state;
// const showEdit = headerList.length >= 10;
// 把record里明文key改成转换后的key，用于在模板表单中回显
const headerMap = headerList.reduce((acc, header) => ({ ...acc, [header.name]: header }), {});
const formData = Object.keys(recordTemp).reduce((acc, key) => {
if (!headerMap[key]) return acc;
return { ...acc, [headerMap[key].base52]: recordTemp[key] };
}, {});
this.setState({
formData,
modalVisible: true,
isAdd: false,
// showEdit,
});
};
delete = (record) => {
ModalConfirm('确定删除？', {
onOk: () => {
const { objId } = this.props;
// 找出主键
const { primaryKey } = this.state;
const Keys = {};
Keys[primaryKey] = record[primaryKey];
deleteTableItem(objId, primaryKey, record[primaryKey]).then((res) => {
this.getPage();
});
},
});
};
changeFormData = (value, key) => {
this.setState(({ formData }) => ({ formData: { ...formData, [key]: value } }));
};
getPage = () => {
const { objId, filters = {} } = this.props;
const {
formValues,
pageData: { pagination },
} = this.state;
const query = { ...formValues, ...filters };
const pageNo = pagination.current ? pagination.current : 1;
const pageSize = pagination.pageSize ? pagination.pageSize : 10;
fetchTableData({ dataObjId: objId, query, pageSize, pageNo }).then((res) => {
if (!res.rows) {
console.log('分页接口rows返回null报错');
}
this.setState({
pageData: {
list: res.rows,
pagination: {
current: res.pageNo,
pageSize: res.pageSize,
total: Number(res.total),
},
},
});
});
};
handleStandardTableChange = (pagination, filtersArg, sorter) => {
this.setState(
({ pageData }) => ({
pageData: { ...pageData, pagination },
}),
this.getPage,
);
};
handleAdd = () => {
const {
objId,
form: { validateFields },
} = this.props;
const { isAdd } = this.state;
validateFields((err, values) => {
if (err) return;
this.setState({ confirmLoading: true });
addOrEditTableItem({ objId, data: values, isAdd }).then((res) => {
this.setState({ confirmLoading: false });
if (res === true) {
message.success('操作成功');
this.setState({
modalVisible: false,
});
this.getPage();
} else {
message.error('操作失败');
}
});
});
};
handleModalVisible = () => {
this.setState({
modalVisible: this.state.modalVisible ? false : true,
formData: {},
});
};
handleSelectRows = (rows) => {
this.setState({
selectedRows: rows,
});
};
batchDelete = (e) => {
const { selectedRows, primaryKey } = this.state;
const { objId } = this.props;
if (!selectedRows) return;
ModalConfirm('确定删除？', {
onOk: () => {
deleteTableItem(objId, primaryKey, selectedRows.map((row) => row[primaryKey])).then(
(res) => {
this.setState({
selectedRows: [],
});
this.getPage();
},
);
},
});
};
goBack = () => {
router.goBack();
};
formStateChange = (value, key) => {
this.setState(({ formValues }) => ({ formValues: { ...formValues, [key]: value } }));
};
resetFormValues = () => {
this.setState({
formValues: {},
});
};
render() {
const {
modalVisible,
selectedRows,
isAdd,
objId,
pageData,
showEdit,
formData,
primaryKey,
formValues,
searchConfig,
confirmLoading,
} = this.state;
const { hasExport, form, hasImport, templateCode } = this.props;
const addOrEditModalProps = {
handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible,
content: formData,
form,
isAdd,
templateCode,
modalVisible,
confirmLoading,
};
return (
<>
{searchConfig.length > 0 ? (
<SearchDom
formStateChange={this.formStateChange}
formValues={formValues}
getPage={this.getPage}
resetFormValues={this.resetFormValues}
config={{ condition: searchConfig, fromTab: true }}
/>
) : null}
<Shell styleShell={{ marginTop: searchConfig && searchConfig.length ? 16 : 0 }}>
<div style={{ paddingLeft: '10px', marginTop: '20px' }}>
<ButtonDiy icon="plus" className="primaryBlue" handleClick={this.add} name="新建" />
{hasImport && <ImportUtil objId={objId} />}
{hasExport && <ExportInfo objId={objId} />}
<ButtonDiy handleClick={this.batchDelete} name="批量删除" />
</div>
<StandardTable
rowKey="id"
data={pageData}
columns={this.columns}
selectedRows={selectedRows}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
scroll={{ x: true }}
/>
</Shell>
<AddOrEditModal {...addOrEditModalProps} />
</>
);
}
}
export default Form.create()(ListWithAddEditTemplate);
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论