提交 94f59837 authored 作者: 徐立's avatar 徐立
...@@ -3,7 +3,9 @@ import { uaaRequest } from '@/webPublic/one_stop_public/utils/request'; ...@@ -3,7 +3,9 @@ import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
export const getHead = (payload, callback) => { export const getHead = (payload, callback) => {
uaaRequest('/DataColumnApi/getHeaderList', payload).then(res => { uaaRequest('/DataColumnApi/getHeaderList', payload).then(res => {
if (!res) return; if (!res) return;
if (callback) callback(res); if (callback) {
callback(res);
}
}); });
}; };
......
...@@ -13,337 +13,323 @@ import SearchDom from '@/highOrderComponent/SearchDom'; ...@@ -13,337 +13,323 @@ import SearchDom from '@/highOrderComponent/SearchDom';
import StandardTable from '@/components/StandardTable'; import StandardTable from '@/components/StandardTable';
import AddOrEditModal from './AddOrEditModal'; import AddOrEditModal from './AddOrEditModal';
import { import {
fetchTableHeader, fetchTableHeader,
fetchTableData, fetchTableData,
addOrEditTableItem, addOrEditTableItem,
deleteTableItem, deleteTableItem,
} from '@/webPublic/Services'; } from '@/webPublic/Services';
import { ModalConfirm } from '@/baseComponent/Modal'; 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 => const getValue = (obj) =>
Object.keys(obj) Object.keys(obj)
.map(key => obj[key]) .map((key) => obj[key])
.join(','); .join(',');
/** /**
* 展示list数据, * 展示list数据,
* 根据元数据id显示元数据表格,根据模板id新增或编辑某条数据 * 根据元数据id显示元数据表格,根据模板id新增或编辑某条数据
*/ */
class ListWithAddEditTemplate extends React.Component { class ListWithAddEditTemplate extends React.Component {
static propTypes = { static propTypes = {
objId: PropTypes.string.isRequired, // 元数据表id objId: PropTypes.string.isRequired, // 元数据表id
templateCode: PropTypes.string.isRequired, // 表单模板id templateCode: PropTypes.string.isRequired, // 表单模板id
filters: PropTypes.object, // 请求元数据表格时额外的过滤条件 filters: PropTypes.object, // 请求元数据表格时额外的过滤条件
hasImport: PropTypes.bool, // 是否有导入操作按钮,默认false hasImport: PropTypes.bool, // 是否有导入操作按钮,默认false
hasExport: PropTypes.bool, // 是否有导出按钮,默认false hasExport: PropTypes.bool, // 是否有导出按钮,默认false
}; };
static defaultProps = { static defaultProps = {
filters: {}, filters: {},
hasImport: false, hasImport: false,
hasExport: false, hasExport: false,
}; };
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
modalVisible: false, modalVisible: false,
formData: null, // 编辑某行数据时表单的数据 formData: null, // 编辑某行数据时表单的数据
headerList: [], // 表头的数据 headerList: [], // 表头的数据
searchConfig: [], searchConfig: [],
formValues: {}, // 搜索区域的数据 formValues: {}, // 搜索区域的数据
isAdd: false, // 是新增还是编辑 isAdd: false, // 是新增还是编辑
selectedRows: [], selectedRows: [],
primaryKey: null, primaryKey: null,
// showEdit: false, // 是否显示编辑区域 // showEdit: false, // 是否显示编辑区域
pageData: { pageData: {
list: [], list: [],
pagination: {}, pagination: {},
}, },
confirmLoading: false, confirmLoading: false,
}; };
this.columns = []; this.columns = [];
} }
// 渲染值 // 渲染值
componentDidMount() { componentDidMount() {
const { objId } = this.props; const { objId } = this.props;
fetchTableHeader(objId).then(headerList => { fetchTableHeader(objId).then((headerList) => {
if (!headerList) return; if (!headerList) return;
this.setState({ headerList }); this.setState({ headerList });
this.columns = headerList this.columns = headerList
.filter(i => !i.isHidden) .filter((i) => !i.isHidden)
.slice(0, 10) .slice(0, 10)
.map(item => ({ .map((item) => ({
title: item.title, title: item.title,
dataIndex: item.name, dataIndex: item.name,
render: date.includes(item.type) && dateRender, render: date.includes(item.type) && dateRender,
})); }));
const operation = { const operation = {
title: '操作', title: '操作',
render: (_, record) => { fixed: 'right',
return ( width: 120,
<Fragment> render: (_, record) => {
<a onClick={this.modify.bind(this, record)}>编辑</a> return (
<Divider type="vertical" /> <Fragment>
<a onClick={this.delete.bind(this, record)}>删除</a> <a onClick={this.modify.bind(this, record)}>编辑</a>
</Fragment> <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.columns.push(operation);
this.setState({ primaryKey }); const primaryKey = (headerList.find((i) => i.isPrimaryKey) || {}).name;
const searchConfig = headerList.filter(i => i.isShowQuery).map(item => { this.setState({ primaryKey });
const sear = getFormArrayConfig([item]);
const { required, placeHolder, ...config } = sear[0]; const searchConfig = headerList.filter((i) => i.isShowQuery).map((item) => {
return config; const sear = getFormArrayConfig([item]);
}); const { required, placeHolder, ...config } = sear[0];
this.setState({ searchConfig, primaryKey }); return config;
this.getPage(); });
}); this.setState({ searchConfig, primaryKey });
} this.getPage();
});
// 新增按钮事件 }
add = () => {
const { headerList } = this.state; // 新增按钮事件
// const showEdit = headerList.length >= 10; add = () => {
this.setState({ const { headerList } = this.state;
modalVisible: true, // const showEdit = headerList.length >= 10;
formData: {}, this.setState({
isAdd: true, modalVisible: true,
// showEdit, formData: {},
}); isAdd: true,
}; // showEdit,
});
// 修改按钮事件 };
modify = record => {
const recordTemp = { ...record, update_time: Date.now() }; // 修改按钮事件
const { headerList } = this.state; modify = (record) => {
// const showEdit = headerList.length >= 10; const recordTemp = { ...record, update_time: Date.now() };
// 把record里明文key改成转换后的key,用于在模板表单中回显 const { headerList } = this.state;
const headerMap = headerList.reduce((acc, header) => ({ ...acc, [header.name]: header }), {}); // const showEdit = headerList.length >= 10;
const formData = Object.keys(recordTemp).reduce( // 把record里明文key改成转换后的key,用于在模板表单中回显
(acc, key) => { const headerMap = headerList.reduce((acc, header) => ({ ...acc, [header.name]: header }), {});
if (!headerMap[key]) return acc; const formData = Object.keys(recordTemp).reduce((acc, key) => {
return { ...acc, [headerMap[key].base52]: recordTemp[key] }; if (!headerMap[key]) return acc;
}, return { ...acc, [headerMap[key].base52]: recordTemp[key] };
{} }, {});
); this.setState({
this.setState({ formData,
formData, modalVisible: true,
modalVisible: true, isAdd: false,
isAdd: false, // showEdit,
// showEdit, });
}); };
};
delete = (record) => {
delete = record => { ModalConfirm('确定删除?', {
ModalConfirm('确定删除?', { onOk: () => {
onOk: () => { const { objId } = this.props;
const { objId } = this.props; // 找出主键
// 找出主键 const { primaryKey } = this.state;
const { primaryKey } = this.state; const Keys = {};
const Keys = {};
Keys[primaryKey] = record[primaryKey];
Keys[primaryKey] = record[primaryKey]; deleteTableItem(objId, primaryKey, record[primaryKey]).then((res) => {
deleteTableItem(objId, primaryKey, record[primaryKey]).then(res => { this.getPage();
this.getPage(); });
}); },
}, });
}); };
};
changeFormData = (value, key) => {
changeFormData = (value, key) => { this.setState(({ formData }) => ({ formData: { ...formData, [key]: value } }));
this.setState(({ formData }) => ({ formData: { ...formData, [key]: value } })); };
};
getPage = () => {
getPage = () => { const { objId, filters = {} } = this.props;
const { objId, filters = {} } = this.props; const {
const { formValues,
formValues, pageData: { pagination },
pageData: { pagination }, } = this.state;
} = this.state; const query = { ...formValues, ...filters };
const query = { ...formValues, ...filters }; const pageNo = pagination.current ? pagination.current : 1;
const pageNo = pagination.current ? pagination.current : 1; const pageSize = pagination.pageSize ? pagination.pageSize : 10;
const pageSize = pagination.pageSize ? pagination.pageSize : 10;
fetchTableData({ dataObjId: objId, query, pageSize, pageNo }).then((res) => {
fetchTableData({ dataObjId: objId, query, pageSize, pageNo }).then(res => { if (!res.rows) {
if (!res.rows) { console.log('分页接口rows返回null报错');
console.log('分页接口rows返回null报错'); }
} this.setState({
this.setState({ pageData: {
pageData: { list: res.rows,
list: res.rows, pagination: {
pagination: { current: res.pageNo,
current: res.pageNo, pageSize: res.pageSize,
pageSize: res.pageSize, total: Number(res.total),
total: Number(res.total), },
}, },
}, });
}); });
}); };
};
handleStandardTableChange = (pagination, filtersArg, sorter) => {
handleStandardTableChange = (pagination, filtersArg, sorter) => { this.setState(
this.setState( ({ pageData }) => ({
({ pageData }) => ({ pageData: { ...pageData, pagination },
pageData: { ...pageData, pagination }, }),
}), this.getPage,
this.getPage );
); };
};
handleAdd = () => {
handleAdd = () => { const {
const { objId,
objId, form: { validateFields },
form: { validateFields }, } = this.props;
} = this.props; const { isAdd } = this.state;
const { isAdd } = this.state; validateFields((err, values) => {
validateFields((err, values) => { if (err) return;
if (err) return; this.setState({ confirmLoading: true });
this.setState({ confirmLoading: true }); addOrEditTableItem({ objId, data: values, isAdd }).then((res) => {
addOrEditTableItem({ objId, data: values, isAdd }).then(res => { this.setState({ confirmLoading: false });
this.setState({ confirmLoading: false }); if (res === true) {
if (res === true) { message.success('操作成功');
message.success('操作成功'); this.setState({
this.setState({ modalVisible: false,
modalVisible: false, });
}); this.getPage();
this.getPage(); } else {
} else { message.error('操作失败');
message.error('操作失败'); }
} });
}); });
}); };
};
handleModalVisible = () => {
handleModalVisible = () => { this.setState({
this.setState({ modalVisible: this.state.modalVisible ? false : true,
modalVisible: this.state.modalVisible ? false : true, formData: {},
formData: {}, });
}); };
};
handleSelectRows = (rows) => {
handleSelectRows = rows => { this.setState({
this.setState({ selectedRows: rows,
selectedRows: rows, });
}); };
};
batchDelete = (e) => {
batchDelete = e => { const { selectedRows, primaryKey } = this.state;
const { selectedRows, primaryKey } = this.state; const { objId } = this.props;
const { objId } = this.props;
if (!selectedRows) return;
if (!selectedRows) return;
ModalConfirm('确定删除?', {
ModalConfirm('确定删除?', { onOk: () => {
onOk: () => { deleteTableItem(objId, primaryKey, selectedRows.map((row) => row[primaryKey])).then(
deleteTableItem(objId, primaryKey, selectedRows.map(row => row[primaryKey])).then(res => { (res) => {
this.setState({ this.setState({
selectedRows: [], selectedRows: [],
}); });
this.getPage(); this.getPage();
}); },
}, );
}); },
}; });
};
goBack = () => {
router.goBack(); goBack = () => {
}; router.goBack();
};
formStateChange = (value, key) => {
this.setState(({ formValues }) => ({ formValues: { ...formValues, [key]: value } })); formStateChange = (value, key) => {
}; this.setState(({ formValues }) => ({ formValues: { ...formValues, [key]: value } }));
};
resetFormValues = () => {
this.setState({ resetFormValues = () => {
formValues: {}, this.setState({
}); formValues: {},
}; });
};
render() {
const { render() {
modalVisible, const {
selectedRows, modalVisible,
isAdd, selectedRows,
objId, isAdd,
pageData, objId,
showEdit, pageData,
formData, showEdit,
primaryKey, formData,
formValues, primaryKey,
searchConfig, formValues,
confirmLoading, searchConfig,
} = this.state; confirmLoading,
const { hasExport, form, hasImport, templateCode } = this.props; } = this.state;
const { hasExport, form, hasImport, templateCode } = this.props;
const addOrEditModalProps = {
handleAdd: this.handleAdd, const addOrEditModalProps = {
handleModalVisible: this.handleModalVisible, handleAdd: this.handleAdd,
content: formData, handleModalVisible: this.handleModalVisible,
form, content: formData,
isAdd, form,
templateCode, isAdd,
modalVisible, templateCode,
confirmLoading, modalVisible,
}; confirmLoading,
return ( };
<> return (
{showEdit ? ( <>
<Edit {searchConfig.length > 0 ? (
id={objId} <SearchDom
recordId={formData[primaryKey]} formStateChange={this.formStateChange}
recordKey={primaryKey} formValues={formValues}
returnThis={() => { getPage={this.getPage}
this.setState({ resetFormValues={this.resetFormValues}
showEdit: false, config={{ condition: searchConfig, fromTab: true }}
}); />
this.getPage(); ) : null}
}} <Shell styleShell={{ marginTop: searchConfig && searchConfig.length ? 16 : 0 }}>
/> <div style={{ paddingLeft: '10px', marginTop: '20px' }}>
) : ( <ButtonDiy icon="plus" className="primaryBlue" handleClick={this.add} name="新建" />
<Fragment> {hasImport && <ImportUtil objId={objId} />}
{searchConfig.length > 0 ? ( {hasExport && <ExportInfo objId={objId} />}
<SearchDom <ButtonDiy handleClick={this.batchDelete} name="批量删除" />
formStateChange={this.formStateChange} </div>
formValues={formValues} <StandardTable
getPage={this.getPage} rowKey="id"
resetFormValues={this.resetFormValues} data={pageData}
config={{ condition: searchConfig, fromTab: true }} columns={this.columns}
/> selectedRows={selectedRows}
) : null} onSelectRow={this.handleSelectRows}
<Shell styleShell={{ marginTop: searchConfig && searchConfig.length ? 16 : 0 }}> onChange={this.handleStandardTableChange}
<div style={{ paddingLeft: '10px', marginTop: '20px' }}> scroll={{ x: true }}
<ButtonDiy icon="plus" className="primaryBlue" handleClick={this.add} name="新建" /> />
{hasImport && <ImportUtil objId={objId} />} </Shell>
{hasExport && <ExportInfo objId={objId} />}
<ButtonDiy handleClick={this.batchDelete} name="批量删除" /> <AddOrEditModal {...addOrEditModalProps} />
</div> </>
<StandardTable );
rowKey="id" }
data={pageData}
columns={this.columns}
selectedRows={selectedRows}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
scroll={{ x: 1200 }}
/>
</Shell>
</Fragment>
)}
<AddOrEditModal {...addOrEditModalProps} />
</>
);
}
} }
export default Form.create()(ListWithAddEditTemplate); export default Form.create()(ListWithAddEditTemplate);
import React, { useState, useEffect } from 'react';
import { Form, Button } from 'antd';
import Shell from '@/baseComponent/Shell';
import { ModalInfo } from '@/baseComponent/Modal';
import { addOrEditTableItem, fetchTableData, fetchTableHeader, } from '@/webPublic/Services';
import { preHandle } from '@/webPublic/one_stop_public/utils/myutils';
import { getOneStopConfig } from '@/baseComponent/utils';
import { RenderFormByContent } from '../RenderForm';
// 直接获取的表格数据的字段是明文,找换成base转换后的字段
function getBaseEncodedData(rowData, tableHeader) {
// {name: base52}
const nameBaseMap = tableHeader.reduce((acc, header) => {
return {...acc, [header.name] : header.base52};
}, {});
// 明文字段转换成base后的字段, eg. {process_status: 1} => {JbZWZHoGRsA: 1}
return Object.keys(rowData).reduce((acc, name) => {
const base52 = nameBaseMap[name];
if(!base52) return acc;
return {...acc, [base52]: rowData[name] };
}, {});
}
// 配置页面,配置数据在元数据表格的第一行
// 1. 页面显示通过模板id渲染。
// 2. 页面数据通过元数据表id, 查询和修改。
// templateCode, 页面模板id
// tableId, 元数据列表id
// children, 可以传children,但children不能是数组(不能传属性),children里可以自定义其他组件。
function SingleDataPageInFirstRow(props) {
const { children, form, templateCode: templateCodeFromProps, dataObjId: dataObjIdFromProps, location: {pathname} } = props;
// templateCode 和 dataObjId 可以通过组件属性或者根据路径配置获取
const templateCodeFromPathname = getOneStopConfig(`${pathname}-templateCode`);
const dataObjIdFromPathname = getOneStopConfig(`${pathname}-dataObjId`);
const templateCode = templateCodeFromPathname || templateCodeFromProps;
const dataObjId = dataObjIdFromPathname || dataObjIdFromProps;
if (!templateCode || !dataObjId) {
console.warn("模板code或者元数据表格id为空,templateCode: " + templateCode + ", dataObjId: " + dataObjId);
return null;
}
const [isAdd, setIsAdd] = useState(false);
const [content, setContent] = useState({});
useEffect(
() => {
fetchTableHeader(dataObjId).then(tableHeader => {
if (!tableHeader) return;
fetchTableData({ pageNo: 1, pageSize: 10, isBase: true, dataObjId, query: {} }).then(res => {
const firstRowData = (res && res.rows && res.rows[0]) || {};
setContent(getBaseEncodedData(firstRowData, tableHeader));
setIsAdd(!!(!res || res.errMsg))
});
});
},
[dataObjId]
);
function handleSave() {
const { validateFields } = form;
validateFields((err, values) => {
if (err) return;
// console.log(JSON.stringify(values.JjvkRobXWTE), JSON.stringify(values.JjvkwLqcsyY));
preHandle(values);
// console.log(JSON.stringify(values.JjvkRobXWTE));
addOrEditTableItem({ objId: dataObjId, isAdd, data: values }).then(res => {
if (res) {
ModalInfo('保存成功!');
}
});
});
}
let ClonedChildren;
if (children) {
ClonedChildren = React.cloneElement(React.Children.only(children), {
form,
isAdd,
url: '/DataObjApi/addFormData',
});
}
return (
<Shell styleShell={{ marginTop: 0 }}>
<RenderFormByContent
content={content}
templateCode={templateCode}
form={form}
/>
{ClonedChildren || (
<div style={{ textAlign: 'center', padding: 16 }}>
<Button type="primary" shape="round" ghost onClick={handleSave}>
保存
</Button>
</div>
)}
</Shell>
);
}
export default Form.create()(SingleDataPageInFirstRow);
...@@ -361,28 +361,25 @@ class FormList extends React.Component { ...@@ -361,28 +361,25 @@ class FormList extends React.Component {
const b = nextProps.value||{} const b = nextProps.value||{}
const a = this.props.value||{} const a = this.props.value||{}
if(JSON.stringify(a)!=JSON.stringify(b)){
const params = {
pageNo: 1, if(JSON.stringify(a)!=JSON.stringify(b)){
pageSize: this.props.pageSize||10, const params = {
query: JSON.stringify(this.state.formValues), pageNo: 1,
}; pageSize: this.props.pageSize||10,
this.custom=Base16Encode(JSON.stringify(b)) query: JSON.stringify(this.state.formValues),
};
if(this.state.objId)this.getPage(params) this.columns=nextProps.value.columns
this.custom=Base16Encode(JSON.stringify(b))
if( nextProps.value.getPage){
} this.getPage(params,null,nextProps.value.getPage);
if(this.props.objCode=="1"||this.props.objCode==1){ }else{
const params = { if(this.state.objId)this.getPage(params)
pageNo: 1, }
pageSize: this.props.pageSize||10,
query: JSON.stringify(this.state.formValues),
};
this.columns=nextProps.value.columns
if( nextProps.value.getPage){
this.getPage(params,null,nextProps.value.getPage);
}
} }
const x=nextProps.selects const x=nextProps.selects
const y = this.props.selects const y = this.props.selects
......
...@@ -2,6 +2,7 @@ import React, { Fragment, Component } from 'react'; ...@@ -2,6 +2,7 @@ import React, { Fragment, Component } from 'react';
import styles from './index.less'; import styles from './index.less';
import ButtonDiy from '@/baseComponent/ButtonDiy'; import ButtonDiy from '@/baseComponent/ButtonDiy';
import Shell from '@/baseComponent/Shell'; import Shell from '@/baseComponent/Shell';
import { ModalConfirm } from '@/baseComponent/Modal';
export default class FormatSetting extends Component { export default class FormatSetting extends Component {
...@@ -49,6 +50,14 @@ export default class FormatSetting extends Component { ...@@ -49,6 +50,14 @@ export default class FormatSetting extends Component {
} }
initConfig = () => {
ModalConfirm('您确定初始化打印录取通知书格式吗?',{
onOk: ()=>{
this.props.initConfig();
},
});
};
render() { render() {
const { bgImage, formatSettingObject, saveConfig } = this.props; const { bgImage, formatSettingObject, saveConfig } = this.props;
const configInfo = Object.keys(formatSettingObject); const configInfo = Object.keys(formatSettingObject);
...@@ -56,10 +65,12 @@ export default class FormatSetting extends Component { ...@@ -56,10 +65,12 @@ export default class FormatSetting extends Component {
return <Fragment> return <Fragment>
<Shell styleShell={{marginTop: '0',marginBottom: '20px'}}> <Shell styleShell={{marginTop: '0',marginBottom: '20px'}}>
<div style={{ height: '54px', padding: '12px 0 12px 12px' }}> <div style={{ height: '54px', padding: '12px 0 12px 12px' }}>
<ButtonDiy <ButtonDiy name="保存"
name="保存" className="primary"
className="primary" handleClick={saveConfig}
handleClick={saveConfig} />
<ButtonDiy name={'初始化格式'}
handleClick={this.initConfig}
/> />
</div> </div>
</Shell> </Shell>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论