Skip to content

W
WebPublic
提交 582dc5db authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

增加 元数据管理的 导入 编辑 功能 且都是通过权限控制

上级 ce731b0a
隐藏空白字符变更
内嵌 并排
正在显示 包含 668 行增加 和 618 行删除
FormInsertDiy/Export/index.js
浏览文件 @ 582dc5db
......@@ -7,6 +7,7 @@ import { getToken } from '@/utils/authority';
import config from '@/config/config';
import QueryItem from './QueryItem';
import OrderItem from './OrderItem';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import FormdataWrapper from '@/utils/object-to-formdata-custom';
......@@ -359,8 +360,10 @@ export default class Index extends React.Component {
} = this.state;
return (
<span>
<Button shape='round' onClick={this.open}>自定义导出</Button>
<div id='downloadDiv' style={{ display: 'none' }}></div>
<ButtonDiy handleClick={this.open} name={'自定义导出'}/>
<div id='downloadDiv' style={{ display: 'none' }}>
</div>
<Modal
width={670}
maskClosable={false}
......
FormInsertDiy/ImportUtil/ImportUtil.js
浏览文件 @ 582dc5db
// import React, { Fragment } from 'react';
// import {
// Button,
// Modal,
// Steps,
// Upload,
// Icon,
// message,
// Tabs,
// Table,
// } from 'antd';
// import styles from './ImportUtil.less';
// import ButtonDiy from '@/baseComponent/ButtonDiy';
// import { exportExcel } from 'xlsx-oc'
// import config from '@/config/config';
// import { connect } from 'dva';
// const Step = Steps.Step;
//
//
// const TabPane = Tabs.TabPane;
//
//
// @connect(({ DataObj, loading }) => ({
// DataObj,
// loading: loading.models.DataObj,
// }))
// export default class ImportUtil extends React.PureComponent {
// constructor(props) {
// super(props);
//
// const exportTemplateUrl= encodeURI(`${config.sqlFormsServer}/DataObjApi/importTemplateDownload?objId=${this.props.objId}&name=${props.fileName}`);
//
// this.state = {
// ch:false,
// currentKey:"1",
// visible: false,
// current: 0,
// isShow: true,
// filekey: '',
// sucData: [],
// errData: [],
// column: [],
//
// exportTemplateUrl,
//
// isNextDisabled:false,
// };
// }
//
// showModal = () => {
//
// this.setState({
// visible: true,
// });
// };
// handleOk = (e) => {
// this.setState({
// visible: false,
// });
// };
// handleCancel = (e) => {
// this.setState({
// visible: false,
// });
// };
//
// next() {
// const current = this.state.current + 1;
// if (current === 2) {
// this.setState({
// current: current,
// isShow: false,
// });
// if (this.state.errData.lenth > 0) {
// message.error('请检查数据');
// return;
// } else {
// this.import();
// }
// }
// if (current === 3) {
// this.setState({
// current: current,
// isShow: true,
// });
// if (this.props.callback) {
// this.props.callback();
// }
// }
//
// }
//
// prev() {
// const current = this.state.current - 1;
// this.setState({ current });
// }
//
// import() {
// const { dispatch ,importParams } = this.props;
// dispatch({
// type: 'DataObj/importExecute',
// payload: {
// ...(importParams||{}),
// cacheKey:this.state.filekey,
//
// objId: this.props.objId,
// },
// callback: (res) => {
//
// this.next();
// message.success('导入成功');
//
// this.setState({
// current: 3,
// isShow: true,
// visible: false,
//
// });
// if(this.props.callback){
// this.props.callback();
// }
// }
// })
//
//
// }
//
// getCachKey = (filePath) => {
// const { dispatch ,importParams } = this.props;
// dispatch({
// type: 'DataObj/importAnalyse',
// payload: {
// ...(importParams||{}),
// isLocal:false,
// filePath,
// objId: this.props.objId,
// },
// callback: (res) => {
// this.setState({
// filekey: res.cacheKey,
//
// });
// this.queryFile(res.cacheKey);
//
// }
// })
//
//
// };
// queryFile = (cacheKey) => {
// const { dispatch ,importParams } = this.props;
// dispatch({
// type: 'DataObj/importDataQuery',
// payload: {
// ...(importParams||{}),
// cacheKey,
// objId: this.props.objId,
// },
// callback: (res) => {
// this.setState({
// current: 1,
// isShow: false,
//
// sucData: res.pass,
// errData: res.noPass,
// column: res.column
// });
// if(res.noPass&&res.noPass.length==0){
//
//
// if (res.pass.length==0) {
// message.error('当前没有验证成功的数据，无法导入。');
// this.setState({
// currentKey:"1",
// ch:!this.state.ch,
// isNextDisabled: true
// });
// } else {
// message.success('所有数据验证通过，请确认后点击下一步。');
// this.setState({
// currentKey:"2",
// ch:!this.state.ch,
// isNextDisabled: false
// });
// }
// }else{
// message.error('当前存在未验证通过的数据，请按错误提示检测更正导入文件');
// this.setState({
// currentKey:"1",
// ch:!this.state.ch,
// isNextDisabled: true
// });
// }
//
// }
// })
// };
// changePane=(activeKey)=>{
// this.setState({currentKey:activeKey})
// }
// exportError=(column,dataSource)=>{
//
//
// var _headers = []
// for(var i=0;i<column.length;i++){
// _headers.push({k:column[i].dataIndex,v:column[i].title})
// }
// for(var j=0;j<dataSource.length;j++){
// dataSource[j].index=j+1
// }
// exportExcel(_headers, dataSource);
//
//
// }
// render() {
//
// const props = {
// name: 'file',
// action: config.uploadUrl,
//
// headers: {
// authorization: 'authorization-text',
// },
// accept:'.xlsx',
// showUploadList: false,
// onChange: (info) => {
// if (info.file.status !== 'uploading') {
//
// }
// if (info.file.status === 'done') {
// message.success(`${info.file.name} 上传成功`);
// let x = info.file.response;
//
//
//
// this.getCachKey(x);
//
// } else if (info.file.status === 'error') {
// message.error(`${info.file.name} file upload failed.`);
// }
// },
// };
// const steps = [{
// title: '上传Excel',
// }, {
// title: '验证数据',
// }, {
// title: '数据导入',
// },
// {
// title: '导入完成',
// }];
//
// const { current } = this.state;
// const {name, loading} = this.props
// const column1=this.state.column?[{title:"序号",dataIndex:"index",fixed:"left",width:50, render:(v,r,i)=>i+1},...this.state.column]:[]
// var column2=this.state.column?[...this.state.column]:[]
// if(column1.length>1) column1[1].render=(val)=><span style={{color:"red"}}>{val}</span>
//
// column2.splice(0,1)
// column2=[{title:"序号",fixed:"left",width:50, render:(v,r,i)=>i+1},...column2]
//
// return (
// <span>
// <ButtonDiy name={name||'批量导入'}
// type='default'
// className='defaultBlue'
// handleClick={this.showModal}/>
// <Modal
// visible={this.state.visible}
// onOk={this.handleOk}
// maskClosable={false}
// destroyOnClose
// onCancel={this.handleCancel}
// title={null}
// footer={null}
// width={"80%"}
// >
//
// <div className={styles.nomal}>
// <p className={styles.import}>
// EXCEL导入向导
// </p>
// <div style={{ margin: 'auto 23px' }}>
// <Steps current={current}>
// {steps.map(item =>
// <Step key={item.title}
// title={item.title}/>)}
// </Steps>
// <div className="steps-content">
// {steps[this.state.current].content}
// </div>
// <div className={styles.button}>
// {
// (this.state.current < steps.length - 1 && this.state.current !== 0)
// &&
// <ButtonDiy name={this.state.current==3?"确认导入":"下一步"} type="primary" disabled={this.state.current!=3 && this.state.isNextDisabled} className='primaryBlue' handleClick={() => this.next()}/>
//
// }
//
// {
// this.state.current > 0
// &&
// <ButtonDiy style={{ marginLeft: 8 }} name="上一步" className='defaultBlue' handleClick={() => this.prev()}/>
//
// }
// </div>
// </div>
//
// <div className={styles.tip}>
// <p className={styles.tipContent}>
// <span>欢迎使用EXCEL导入向导，首先请您上传需要导入的EXCEL文件。</span>
// <span>点击“选择文件”选择您要导入的EXCEL文件，点击“开始上传”将其上传到服务器上，点击“清空队列”清空当前上传文件队列。</span>
// </p>
//
// </div>
// {
// this.state.isShow ?
// <div className={styles.buttonDown}>
// <Upload {...props}>
// <Button>
// <Icon type="upload"/>点击上传
// </Button>
// </Upload>
// <Button href={this.state.exportTemplateUrl }
// target="_blank"
// type="danger">
// 下载模板
// </Button>
// </div> :
// <Upload {...props}>
// <Button>
// <Icon type="upload"/>
// 重新上传
// </Button>
// </Upload>
// }
//
// {
// this.state.isShow ? <div className={styles.attentionItem}>
// <p>导入事项</p>
// <p>1. 导入操作一次只能上传 1 个EXCEL文件。</p>
// <p>2. 导入文件最大文件大小上传 1 GB。</p>
// <p>3. 只能上传EXCEL文件(XLS, XLSX) 默认支持EXCEL 2003和EXCEL 2007。</p>
// <p>4. 请将EXCEL文件的所有单元格格式设置为“文本”格式</p>
// </div> :
// <div className={styles.error} style={{marginTop:20}}>
//
// <Tabs activeKey={this.state.currentKey} key={this.state.ch} onChange={this.changePane} type="card">
// {this.state.errData&&this.state.errData.length==0?"":<TabPane tab={<span style={{color:"red"}}>验证错误列表</span>} key="1">
// <Button style={{marginTop:5,marginBottom:5}} type="danger" onClick={this.exportError.bind(this,column1,this.state.errData)}>导出错误信息</Button>
//
// <Table columns={column1} size="small"
// style={{overflow: 'auto'}}
// dataSource={this.state.errData}
// bordered={true}/></TabPane>}
// <TabPane tab={<span style={{color:"green"}}>验证成功列表</span>} key="2">
//
// <Button style={{marginTop:5,marginBottom:5}} type="primary" onClick={this.exportError.bind(this,column2,this.state.sucData)}>导出正确信息</Button>
//
// <Table columns={column2} size="small"
// style={{overflow: 'auto'}}
// dataSource={this.state.sucData}
// bordered={true}/></TabPane>
//
// </Tabs>
//
//
// </div>
// }
// </div>
//
// </Modal>
// </span>
// );
// }
// }
import React, { Fragment } from 'react';
import { Button, Modal, Steps, Upload, Icon, message, Tabs, Table } from 'antd';
import styles from './ImportUtil.less';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import { exportExcel } from 'xlsx-oc';
import config from '@/config/config';
import { connect } from 'dva';
const Step = Steps.Step;
const TabPane = Tabs.TabPane;
@connect(({ DataObj, loading }) => ({
DataObj,
loading: loading.models.DataObj,
}))
export default class ImportUtil extends React.PureComponent {
constructor(props) {
super(props);
const exportTemplateUrl = encodeURI(
`${config.sqlFormsServer}/DataObjApi/importTemplateDownload?objId=${this.props.objId}&name=${
props.fileName
}`,
);
this.state = {
ch: false,
currentKey: '1',
visible: false,
current: 0,
isShow: true,
filekey: '',
sucData: [],
errData: [],
column: [],
exportTemplateUrl,
isNextDisabled: false,
};
}
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = (e) => {
this.setState({
visible: false,
});
};
handleCancel = (e) => {
this.setState({
visible: false,
});
};
next() {
const current = this.state.current + 1;
if (current === 2) {
this.setState({
current: current,
isShow: false,
});
if (this.state.errData.lenth > 0) {
message.error('请检查数据');
return;
} else {
this.import();
}
}
if (current === 3) {
this.setState({
current: current,
isShow: true,
});
if (this.props.callback) {
this.props.callback();
}
}
}
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
import() {
const { dispatch, importParams } = this.props;
dispatch({
type: 'DataObj/importExecute',
payload: {
...(importParams || {}),
cacheKey: this.state.filekey,
objId: this.props.objId,
},
callback: (res) => {
this.next();
message.success('导入成功');
this.setState({
current: 3,
isShow: true,
visible: false,
});
if (this.props.callback) {
this.props.callback();
}
},
});
}
getCachKey = (filePath) => {
const { dispatch, importParams } = this.props;
dispatch({
type: 'DataObj/importAnalyse',
payload: {
...(importParams || {}),
isLocal: false,
filePath,
objId: this.props.objId,
},
callback: (res) => {
this.setState({
filekey: res.cacheKey,
});
this.queryFile(res.cacheKey);
},
});
};
queryFile = (cacheKey) => {
const { dispatch, importParams } = this.props;
dispatch({
type: 'DataObj/importDataQuery',
payload: {
...(importParams || {}),
cacheKey,
objId: this.props.objId,
},
callback: (res) => {
this.setState({
current: 1,
isShow: false,
sucData: res.pass,
errData: res.noPass,
column: res.column,
});
if (res.noPass && res.noPass.length == 0) {
if (res.pass.length == 0) {
message.error('当前没有验证成功的数据，无法导入。');
this.setState({
currentKey: '1',
ch: !this.state.ch,
isNextDisabled: true,
});
} else {
message.success('所有数据验证通过，请确认后点击下一步。');
this.setState({
currentKey: '2',
ch: !this.state.ch,
isNextDisabled: false,
});
}
} else {
message.error('当前存在未验证通过的数据，请按错误提示检测更正导入文件');
this.setState({
currentKey: '1',
ch: !this.state.ch,
isNextDisabled: true,
});
}
},
});
};
changePane = (activeKey) => {
this.setState({ currentKey: activeKey });
};
exportError = (column, dataSource) => {
var _headers = [];
for (var i = 0; i < column.length; i++) {
_headers.push({ k: column[i].dataIndex, v: column[i].title });
}
for (var j = 0; j < dataSource.length; j++) {
dataSource[j].index = j + 1;
}
exportExcel(_headers, dataSource);
};
render() {
const props = {
name: 'file',
action: config.sqlFormsServer + '/upload',
headers: {
authorization: 'authorization-text',
},
accept: '.xlsx',
showUploadList: false,
onChange: (info) => {
if (info.file.status !== 'uploading') {
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 上传成功`);
let x = info.file.response;
this.getCachKey(x);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} file upload failed.`);
}
},
};
const steps = [
{
title: '上传Excel',
},
{
title: '验证数据',
},
{
title: '数据导入',
},
{
title: '导入完成',
},
];
const { current } = this.state;
const { name, loading } = this.props;
const column1 = this.state.column
? [
{
title: '序号',
dataIndex: 'index',
fixed: 'left',
width: 50,
render: (v, r, i) => i + 1,
},
...this.state.column,
]
: [];
var column2 = this.state.column ? [...this.state.column] : [];
if (column1.length > 1)
column1[1].render = (val) => <span style={{ color: 'red' }}>{val}</span>;
column2.splice(0, 1);
column2 = [{ title: '序号', fixed: 'left', width: 50, render: (v, r, i) => i + 1 }, ...column2];
return (
<span>
<ButtonDiy
name={name || '批量导入'}
type="default"
className="defaultBlue"
handleClick={this.showModal}
/>
<Modal
visible={this.state.visible}
onOk={this.handleOk}
maskClosable={false}
destroyOnClose
onCancel={this.handleCancel}
title={null}
footer={null}
width={'80%'}>
<div className={styles.nomal}>
<p className={styles.import}>EXCEL导入向导</p>
<div style={{ margin: 'auto 23px' }}>
<Steps current={current}>
{steps.map((item) => (
<Step key={item.title} title={item.title} />
))}
</Steps>
<div className="steps-content">{steps[this.state.current].content}</div>
<div className={styles.button}>
{this.state.current < steps.length - 1 &&
this.state.current !== 0 && (
<ButtonDiy
name={this.state.current == 3 ? '确认导入' : '下一步'}
type="primary"
disabled={this.state.current != 3 && this.state.isNextDisabled}
className="primaryBlue"
handleClick={() => this.next()}
/>
)}
{this.state.current > 0 && (
<ButtonDiy
style={{ marginLeft: 8 }}
name="上一步"
className="defaultBlue"
handleClick={() => this.prev()}
/>
)}
</div>
</div>
<div className={styles.tip}>
<p className={styles.tipContent}>
<span>欢迎使用EXCEL导入向导，首先请您上传需要导入的EXCEL文件。</span>
<span>
点击“选择文件”选择您要导入的EXCEL文件，点击“开始上传”将其上传到服务器上，点击“清空队列”清空当前上传文件队列。
</span>
</p>
</div>
{this.state.isShow ? (
<div className={styles.buttonDown}>
<Upload {...props}>
<Button style={{ marginRight: '20px' }}>
<Icon type="upload" />
点击上传
</Button>
</Upload>
<Button href={this.state.exportTemplateUrl} target="_blank" type="danger">
下载模板
</Button>
</div>
) : (
<Upload {...props}>
<Button>
<Icon type="upload" />
重新上传
</Button>
</Upload>
)}
{this.state.isShow ? (
<div className={styles.attentionItem}>
<p>导入事项</p>
<p>1. 导入操作一次只能上传 1 个EXCEL文件。</p>
<p>2. 导入文件最大文件大小上传 1 GB。</p>
<p>3. 只能上传EXCEL文件(XLS, XLSX) 默认支持EXCEL 2003和EXCEL 2007。</p>
<p>4. 请将EXCEL文件的所有单元格格式设置为“文本”格式</p>
</div>
) : (
<div className={styles.error} style={{ marginTop: 20 }}>
<Tabs
activeKey={this.state.currentKey}
key={this.state.ch}
onChange={this.changePane}
type="card">
{this.state.errData && this.state.errData.length == 0 ? (
''
) : (
<TabPane tab={<span style={{ color: 'red' }}>验证错误列表</span>} key="1">
<Button
style={{ marginTop: 5, marginBottom: 5 }}
type="danger"
onClick={this.exportError.bind(this, column1, this.state.errData)}>
导出错误信息
</Button>
<Table
columns={column1}
size="small"
style={{ overflow: 'auto' }}
dataSource={this.state.errData}
bordered={true}
/>
</TabPane>
)}
<TabPane tab={<span style={{ color: 'green' }}>验证成功列表</span>} key="2">
<Button
style={{ marginTop: 5, marginBottom: 5 }}
type="primary"
onClick={this.exportError.bind(this, column2, this.state.sucData)}>
导出正确信息
</Button>
<Table
columns={column2}
size="small"
style={{ overflow: 'auto' }}
dataSource={this.state.sucData}
bordered={true}
/>
</TabPane>
</Tabs>
</div>
)}
</div>
</Modal>
</span>
);
}
}
FormInsertDiy/ImportUtil/ImportUtil.less
浏览文件 @ 582dc5db
//.nomal{
// background: #fff;
// padding: 10px;
//}
//.title{
// display: flex;
// margin-bottom: 20px;
//}
//.info{
// text-align: center;
// font-weight: bold;
// font-size: 18px;
//}
//.detail{
// text-align: center;
// margin:30px auto;
//}
//.detail img{
// margin: auto 10px;
//}
//.button{
// display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
// display: -moz-box; /* 老版本语法: Firefox (buggy) */
// display: -ms-flexbox; /* 混合版本语法: IE 10 */
// display: -webkit-flex; /* 新版本语法: Chrome 21+ */
// display: -moz-flex;
// display: flex;
// -moz-box-pack: center; /*Firefox*/
// -webkit-box-pack: center; /*Safari,Opera,Chrome*/
// box-pack: center;
// -moz-justify-content: center;
// -webkit-justify-content: center;
// justify-content: center;
//}
//.operation{
// display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
// display: -moz-box; /* 老版本语法: Firefox (buggy) */
// display: -ms-flexbox; /* 混合版本语法: IE 10 */
// display: -webkit-flex; /* 新版本语法: Chrome 21+ */
// display: -moz-flex;
// display: flex;
// -moz-box-pack: center; /*Firefox*/
// -webkit-box-pack: center; /*Safari,Opera,Chrome*/
// box-pack: center;
// -moz-justify-content: center;
// -webkit-justify-content: center;
// justify-content: center;
//}
//.button Button{
// margin: auto 10px;
//
//}
//.titleInfo p span{
// font-weight: bold;
//}
//.import{
// color: #6ca3c9;
// font-size: 16px;
//}
//.button{
// // background: #eff3f8;
// text-align: center;
// padding:20px;
// margin-top: 20px;
//}
//.tip{
// margin:20px auto;
// padding:10px;
// border-top: 1px solid #ccc;
//}
//.tip span{
// display: block;
// margin:10px;
// font-size: 16px;
//}
//.tip::after{
// content: '';
// position: absolute;
// width: 5px;
// height: 57px;
// background: #e5eaf1;
// margin-top: -141px;
// margin-left: -13px;
//}
//.select button{
// color: #fff;
// padding:10px;
// background: #abbac3;
// border: none;
// margin: 10px;
//}
//.attentionItem{
// background: #f4f5f4;
// padding: 10px;
// box-shadow: 1px 1px 1px #ccc;
//}
//.attentionItem p:nth-child(1){
// font-size: 16px;
// margin-left: 0;
//}
//.attentionItem p{
// font-size: 14px;
// margin-left: 45px;
//}
//.submitButtons{
// margin-left: 34px;
//}
//.contentTable{
// display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
// display: -moz-box; /* 老版本语法: Firefox (buggy) */
// display: -ms-flexbox; /* 混合版本语法: IE 10 */
// display: -webkit-flex; /* 新版本语法: Chrome 21+ */
// display: -moz-flex;
// display: flex;
// -moz-box-pack: justify; /*Firefox*/
// -webkit-box-pack:justify; /*Safari,Opera,Chrome*/
// box-pack: justify;
// -moz-justify-content: space-between;
// -webkit-justify-content: space-between;
// justify-content: space-between;
// margin-top: 20px;
//}
//.left{
// width: 50%;
//}
//.right{
// width: 50%;
// border-left: 1px solid #317ecc;
//}
//.error p{
// color: #fff;
// background: #317ecc;
// // margin: 10px auto;
// text-align: left;
// font-size: 18px;
//}
//.download{
// background: #f5f5f5;
// padding: 5px;
// margin-top: -16px;
//}
//.download img{
// margin-top: -2px;
// margin-right: 5px;
//}
//.download button{
// border: none;
// background: #f5f5f5
//}
//.download button:nth-child(1){
// border-right: 1px solid #ccc;
//}
//.download button:nth-child(2){
// border-right: 1px solid #ccc;
//}
//.buttonDown{
// display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
// display: -moz-box; /* 老版本语法: Firefox (buggy) */
// display: -ms-flexbox; /* 混合版本语法: IE 10 */
// display: -webkit-flex; /* 新版本语法: Chrome 21+ */
// display: -moz-flex;
// display: flex;
// -moz-box-pack: start; /*Firefox*/
// -webkit-box-pack: start; /*Safari,Opera,Chrome*/
// box-pack: start;
// -moz-justify-content: flex-start;
// -webkit-justify-content: flex-start;
// justify-content: flex-start;
// margin-bottom: 20px;
//}
//.buttonDown>button{
// margin-left: 10px;
// background: #abbac3;
// border: none;
// color: #fff;
// padding: 5px 12px;
// border-radius: 5px;
//}
.nomal {
background: #fff;
padding: 10px;
}
.title {
display: flex;
margin-bottom: 20px;
}
.info {
text-align: center;
font-weight: bold;
font-size: 18px;
}
.detail {
text-align: center;
margin: 30px auto;
}
.detail img {
margin: auto 10px;
}
.button {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -moz-flex;
display: flex;
-moz-box-pack: center; /*Firefox*/
-webkit-box-pack: center; /*Safari,Opera,Chrome*/
box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
.operation {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -moz-flex;
display: flex;
-moz-box-pack: center; /*Firefox*/
-webkit-box-pack: center; /*Safari,Opera,Chrome*/
box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
.button Button {
margin: auto 10px;
}
.titleInfo p span {
font-weight: bold;
}
.import {
color: #6ca3c9;
font-size: 16px;
}
.button {
// background: #eff3f8;
text-align: center;
padding: 20px;
margin-top: 20px;
}
.tip {
margin: 20px auto;
padding: 10px;
border-top: 1px solid #ccc;
}
.tip span {
display: block;
margin: 10px;
font-size: 16px;
}
.tip::after {
content: '';
position: absolute;
width: 5px;
height: 57px;
background: #e5eaf1;
margin-top: -141px;
margin-left: -13px;
}
.select button {
color: #fff;
padding: 10px;
background: #abbac3;
border: none;
margin: 10px;
}
.attentionItem {
background: #f4f5f4;
padding: 10px;
box-shadow: 1px 1px 1px #ccc;
}
.attentionItem p:nth-child(1) {
font-size: 16px;
margin-left: 0;
}
.attentionItem p {
font-size: 14px;
margin-left: 45px;
}
.submitButtons {
margin-left: 34px;
}
.contentTable {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -moz-flex;
display: flex;
-moz-box-pack: justify; /*Firefox*/
-webkit-box-pack: justify; /*Safari,Opera,Chrome*/
box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-top: 20px;
}
.left {
width: 50%;
}
.right {
width: 50%;
border-left: 1px solid #317ecc;
}
.error p {
color: #fff;
background: #317ecc;
// margin: 10px auto;
text-align: left;
font-size: 18px;
}
.download {
background: #f5f5f5;
padding: 5px;
margin-top: -16px;
}
.download img {
margin-top: -2px;
margin-right: 5px;
}
.download button {
border: none;
background: #f5f5f5
}
.download button:nth-child(1) {
border-right: 1px solid #ccc;
}
.download button:nth-child(2) {
border-right: 1px solid #ccc;
}
.buttonDown {
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -moz-flex;
display: flex;
-moz-box-pack: start; /*Firefox*/
-webkit-box-pack: start; /*Safari,Opera,Chrome*/
box-pack: start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
margin-bottom: 20px;
}
.buttonDown > button {
margin-left: 10px;
background: #abbac3;
border: none;
color: #fff;
padding: 5px 12px;
border-radius: 5px;
}
FormInsertDiy/List/ExportAndImportAndDetail.js
浏览文件 @ 582dc5db
......@@ -10,7 +10,7 @@ const ExportAndImportAndDetail = (props) => {
const Authority = {
add: true, // 新增
delete: true, // 删除
detail: true, // 详情
edit: true, // 编辑
auditDetail: false, // 审核详情
exportUtil: true, // 导出
importUtil: true, // 导入
......@@ -20,4 +20,4 @@ const ExportAndImportAndDetail = (props) => {
/>;
};
export default ExportAndDetail;
export default ExportAndImportAndDetail;
FormInsertDiy/List/index.js
浏览文件 @ 582dc5db
......@@ -8,7 +8,7 @@ import ButtonDiy from '@/baseComponent/ButtonDiy';
import Shell from '../Shell';
import FormArray from '../AffairPage/component/FormArray';
import Edit from '../Edit/index';
// import ImportUtil from '../ImportUtil/ImportUtil';
import ImportUtil from '../ImportUtil/ImportUtil';
import SearchDom from '@/highOrderComponent/SearchDom';
import StandardTable from '@/components/StandardTable';
import { getHead, fetchData, deleteItem, add, getDetailId } from './services';
......@@ -80,18 +80,25 @@ class FormList extends React.Component {
}
// 渲染值
componentDidMount() {
this.getTableHead();
this.getTableHead();
}
getTableHead = () => {
const { objId, Authority } = this.props;
getHead({ dataObjId: objId }, datas => {
if (!datas) return;
let findPrimaryKey = datas.find((x) => {
return x.isPrimaryKey === true;
});
if (findPrimaryKey) {
this.setState({
primaryKey: findPrimaryKey.name,
});
} else {
console.error('没有数据主键,无法执行删除操作');
}
datas = datas.filter((x) => {
return x.isHidden !== true;
});
......@@ -99,23 +106,20 @@ class FormList extends React.Component {
item.extendType = item.extendTypeId;
item.dataIndex = item.name;
item.dataType = item.type;
if (item.isPrimaryKey) {
this.setState({
primaryKey: item.name,
});
}
}
datas = handleColumns(datas);
if (Authority && Authority.auditDetail) {
if (Authority && Authority.auditDetail) { //流程审核详情 和 编辑,查看 不能 同时存在.
datas.push(
{
dataIndex: 'operation',
title: '操作',
dataIndex: 'auditProcessDetail',
title: '审核详情',
fixed: datas.length > 12 ? 'right' : false,
render: (text, record) => {
return (<a onClick={()=>{this.getIdByCode(record.process_biz_key)}}>
return (<a onClick={() => {
this.getIdByCode(record.process_biz_key);
}}>
流程审核详情
</a> );
</a>);
/*return (<Link to={
{
pathname: './Detail',
......@@ -131,24 +135,9 @@ class FormList extends React.Component {
},
);
}
this.columns = datas;
this.setState({ formItem: datas });
/* let i = 0;
for (let t in datas) {
/!* if (i < 10) {
let column = {};
column.title = datas[t].title;
column.dataIndex = datas[t].name;
if (date.includes(datas[t].type)) {
column.render = val => val && moment(val).format('YYYY-MM-DD HH:mm:ss');
}
this.columns.push(column);
i++;
}*!/
if (datas[t].isPrimaryKey) {
}
}*/
let searchConfig = [];
for (let item of datas) {
if (item.isShowQuery) {
......@@ -164,37 +153,40 @@ class FormList extends React.Component {
this.setState({
searchConfig,
});
/*let opt = {
title: '操作',
render: (text, record) => (
<Fragment>
<div>
<a onClick={this.modify.bind(this, record)}>
编辑
</a>
</div>
</Fragment>
),
};
this.columns.push(opt);*/
if (Authority && Authority.edit) { //编辑功能
datas.push(
{
dataIndex: 'operationEdit',
title: '编辑',
fixed: 'right',
width: 60,
render: (text, record) => {
return (
<a onClick={this.modify.bind(this, record)}>
编辑
</a>);
},
},
);
}
this.getPage();
});
};
getIdByCode = (code) => {
getDetailId({code},res=>{
getDetailId({ code }, res => {
router.push({
pathname: './Detail',
state: {
record: {id: res.id},
}
record: { id: res.id },
},
});
})
});
};
modify = record => {
const { formItem } = this.state;
if (formItem.length < 10) {
if (formItem.length < 10 || true) {
this.setState({
formData: { ...record },
modalVisible: true,
......@@ -293,7 +285,7 @@ class FormList extends React.Component {
add = () => {
const { formItem } = this.state;
if (formItem.length < 10) {
if (formItem.length < 10 || true) {
this.setState({
modalVisible: true,
formData: {},
......@@ -314,14 +306,23 @@ class FormList extends React.Component {
});
};
batchDelete = e => {
batchDelete = (e) => {
const { objId } = this.props;
const { selectedRows, formItem } = this.state;
if (!selectedRows) return;
const Keys = formItem.filter(i => i.isPrimaryKey).reduce((acc, i) => {
return { ...acc, [i.name]: selectedRows.map(row => row[i.name]).join(',') };
if (!selectedRows || selectedRows.length < 1) {
message.warning('请选择您要删除的数据');
return false;
}
// 找出主键
const { primaryKey } = this.state;
let Keys = selectedRows.map((x) => {
return x[primaryKey];
});
deleteItem({ keys: JSON.stringify(Keys), objId }, () => {
deleteItem({
keys: JSON.stringify({ [primaryKey]: Keys.join(',') }),
objId,
// isSelf: true,
}, () => {
this.setState({
selectedRows: [],
});
......@@ -358,6 +359,7 @@ class FormList extends React.Component {
isAdd,
changeFormData: this.changeFormData,
};
console.log(this.columns);
return (
<>
{showEdit ? (
......@@ -402,12 +404,16 @@ class FormList extends React.Component {
Authority && Authority.exportUtil === false ? null :
<ExportInfo objId={objId}/>
}
{/* <ImportUtil objId={objId} />*/}
{
Authority && Authority.importUtil === false ? null :
<ImportUtil objId={objId}
callback={this.getPage}
/>
}
</div>
<StandardTable
rowKey="row_id"
rowKey={primaryKey}
data={pageData}
columns={this.columns}
selectedRows={selectedRows}
......
FormInsertDiy/config/index.js
浏览文件 @ 582dc5db
......@@ -61,7 +61,7 @@ const transLateTimeTOUnix = (value, dataType) => {
const getFormArrayConfig = header => {
let config = [];
for (let item of header) {
if (item.isPrimaryKey || item.isHidden) {
if (item.isPrimaryKey || item.isHidden || item.dataIndex === 'operationEdit') {
// 主键
continue;
/* config.push(
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论