import React, { Fragment } from 'react'; import { Button, Card, DatePicker, Divider, Form, Row, Col, Input, InputNumber, message, Select, Tree, Tooltip, Spin, } from 'antd'; import { connect } from 'dva'; import PageHeaderWrapper from './PageHeaderWrapper'; import styles from './TableList.less'; import StandardTable from './StandardTable'; import moment from 'moment'; import router from 'umi/router'; import ExportInfo from '../../App/ExportInfo'; import ExportCurrentInfo from '../../App/ExportCurrentInfo'; import StatisticsInfo from '../../App/StatisticsInfo'; import ImportUtil from '../../App/ImportUtil'; import SearchInfo from '../../App/SearchInfo'; import { Base16Encode } from '../../Base16/index'; import { isEmpty } from 'lodash'; import FilePreview from '@/webPublic/one_stop_public/filePreview'; import { queryApiActionPath, queryFileUrl } from '@/webPublic/one_stop_public/utils/queryConfig'; import UploadCom from '@/webPublic/one_stop_public/libs/UploadCom'; import { getModal, getPopconfirm } from '@/webPublic/one_stop_public/utils/utils'; import { getServicesNomal } from '../../Services/services'; import { getFormDataListApi, getBatchOptionsApi, getFormDataApi, deleteFormDataApi, getDetailByCodeApi, findByCodeApi, getDetailApi, getHeaderListApi, getGroupListApi, addFormDataApi, } from '../../Services/apiConfig'; const Popconfirm = getPopconfirm(); const Modal = getModal(); const FormItem = Form.Item; let AllWidth = 0; // 表格总长度 const { RangePicker } = DatePicker; const TreeNode = Tree.TreeNode; const text = [ 'BINARY', 'BIT', 'BLOB', 'CHAR', 'GEOMETRY', 'GEOMETRYCOLLECTION', 'JSON', 'LINESTRING', 'LONGBLOB', 'LONGTEXT', 'MEDIUMBLOB', 'MEDIUMINT', 'MEDIUMTEXT', 'MULTILINESTRING', 'MULTIPOINT', 'MULTIPOLYGON', 'POINT', 'POLYGON', 'REAL', 'DECIMAL', 'ENUM', 'SET', 'TEXT', 'TINYBLOB', 'TIBYTEXT', 'VARBINARY', 'VARCHAR', ]; const number = ['BIGINT', 'DOUBLE', 'FLOAT', 'INT', 'INTEGER', 'NUMERIC', 'SMALLINT', 'TINYINT']; const data = ['DATE', 'DATETIME', 'TIME', 'TIMESTAMP', 'YEAR']; const CreateForm = Form.create()((props) => { const { modalVisible, form, handleAdd, formLoading, formData, isAdd, handleModalVisible, formItem, getItem, isView, } = props; //通过回调 const okHandle = () => { form.validateFields((err, fieldsValue) => { if (err) return; if (isView) { handleModalVisible(); return; } formItem.map((item, index) => { if (item.type.indexOf('DATE') > -1) { for (let d in fieldsValue) { if (item.name === d && fieldsValue[d]) { fieldsValue[d] = fieldsValue[d].format('YYYY-MM-DD HH:mm:ss'); } } } }); let params = { ...fieldsValue }; handleAdd(params, isAdd); }); }; //需要获取动态表单 return ( <Modal width="700px" maskClosable={false} destroyOnClose title={isView ? '查看详情' : isAdd ? '新增' : '编辑'} visible={modalVisible} footer={ isView ? null : [ <Button key="back" onClick={() => handleModalVisible()}> 取消 </Button>, <Button key="submit" type="primary" onClick={okHandle}> 确定 </Button>, ] } onOk={okHandle} onCancel={() => handleModalVisible()}> {formItem.map((item, index) => getItem(false, form, item, isAdd, formData, { span: 5 }, { span: 15 }), )} </Modal> ); }); @connect(({ formList, loading }) => ({ formList, loading: loading.models.formList, })) @Form.create() class TreeList extends React.Component { constructor(props) { super(props); const { json: { treeTitleName, treeKeyName }, } = this.props; const root = {}; root[treeTitleName] = '根目录'; root[treeKeyName] = '0-0'; this.state = { data: { list: [], pagination: {}, }, treeData: [root], isReady: false, parentName: '根节点', parentId: null, selects: [], modalVisible: false, formData: null, formValues: {}, formItem: [], objId: this.props.objId || (this.props.location ? this.props.location.state.id : null), isAdd: false, querys: [], selectedRows: [], primaryKey: null, options: {}, isTable: true, tableWidth: 500, rights: this.props.rights || [], columnRights: [], isReady: false, groups: {}, showDiv: '', showMobileDiv: '', isView: false, }; } columns = []; getOptions = () => { const refIds = []; for (var i = 0; i < this.state.formItem.length; i++) { if ( this.state.formItem[i].referenceObjId != null && this.state.options[this.state.formItem[i].id + ''] == null ) { refIds.push(datas[t].id); } } if (refIds.length > 0) { getServicesNomal(getBatchOptionsApi, { ids: refIds }).then(options => { this.setState({ options: { ...this.state.options, ...options } }); }); } }; getList = (values, callback, isFirst) => { const { json: { treeParentIdName, ctgFilterSql } } = this.props; if (!values) { values = this.state.formValues; } getServicesNomal(getFormDataListApi, { ...values, ctgFilterSql: ctgFilterSql, parentIdName: treeParentIdName, dataObjId: this.state.objId, }).then(res => { callback() }) }; modify = (record) => { // if (this.state.formItem.length < 10) { this.getOptions(); getServicesNomal(getFormDataApi, { dataObjId: this.state.objId, key: this.state.primaryKey, value: record[this.state.primaryKey], isBase: false, }).then(record2 => { this.setState({ formData: record2, modalVisible: true, isAdd: false, isView: false, }); }); }; view = (record) => { // if (this.state.formItem.length < 10) { this.getOptions(); this.setState({ formData: record, modalVisible: true, isAdd: false, isView: true, }); }; isJSON = (str) => { if (typeof str == 'string') { try { var obj = JSON.parse(str); if (typeof obj == 'object' && obj) { return true; } else { return false; } } catch (e) { console.log('error:' + str + '!!!' + e); return false; } } console.log('这不是个字符串'); }; delete = (record) => { //找出主键 let Keys = {}; Keys[this.state.primaryKey] = record[this.state.primaryKey]; getServicesNomal(deleteFormDataApi, { keys: JSON.stringify(Keys), objId: this.state.objId, }).then(() => { this.getPage({ parentId: this.state.parentId }, null, null, (list) => { const treeData = this.refesh(this.state.parentId, list, this.state.treeData); this.setState({ modalVisible: false, treeData, }); }); }); }; viewProcess = (record) => { getServicesNomal(getDetailByCodeApi, { code: record.process_biz_key }).then(data => { router.push({ pathname: '/portal/serviceCentre/getdetail', state: { id: data.id } }); }); }; /** * 宽度自适应函数 */ resize = (e) => { let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度 let showMobileDiv = scrollWidth - 77; if (document.querySelector('#previewDiv')) { // 预览模式 this.setState({ showMobileDiv: document.querySelector('#previewDiv').clientWidth - 77, }); } else { this.setState({ showMobileDiv, }); } }; //渲染值 componentDidMount() { window.addEventListener('resize', this.resize); if (this.props.objCode) { const { objCode } = this.props; if (objCode == 1 || objCode == '1') { this.initColumn(); } else { getServicesNomal(findByCodeApi, { objCode: this.props.objCode }).then(dataObj => { this.setState({ objId: dataObj.id, isTable: data.isTable }, () => { this.initColumn(); }); }); } } else { getServicesNomal(getDetailApi, { id: this.state.objId }).then(data => { this.setState({ isTable: data.isTable }); }); this.initColumn(); } } /** * 移除监听器 */ componentWillUnmount() { window.removeEventListener('resize', this.resize); } custom = this.props.value ? JSON.stringify(this.props.value) : null; componentWillReceiveProps(nextProps) { const b = nextProps.value || {}; const a = this.props.value || {}; if (JSON.stringify(a) != JSON.stringify(b)) { const params = { pageNo: 1, pageSize: this.props.pageSize || 10, query: JSON.stringify(this.state.formValues), }; if (nextProps.value.columns != null && nextProps.value.columns.length > 0) { this.columns = nextProps.value.columns; } this.custom = JSON.stringify(b); if (nextProps.value.getPage) { this.getPage(params, null, nextProps.value.getPage); } else { if (this.state.objId) this.getPage(params); } } const x = nextProps.selects; const y = this.props.selects; if (JSON.stringify(x) != JSON.stringify(y)) { this.setState({ selects: x }); } } initColumn = () => { const { columnRights } = this.state; if (this.props.value && this.props.value.columns) { this.columns = this.props.value.columns; this.getPage(); return; } if (this.props.objCode == 1 || this.props.objCode == '1') { } else { getServicesNomal(getHeaderListApi, { dataObjId: this.state.objId }).then(datas => { const querys = []; const refIds = []; const groups = {}; if (datas) { this.state.formItem = datas; let i = 0; for (let t in datas) { if (datas[t].isPrimaryKey) this.state.primaryKey = datas[t].name; if (datas[t].isHidden) { continue; } let column = {}; column.title = datas[t].title; column.dataIndex = datas[t].name; column.width = datas[t].width; if (i == 0) column.fixed = 'left'; if (columnRights.length > 0 && !columnRights.includes(datas[t].id)) { continue; } if (data.includes(datas[t].type)) { column.render = (val) => { if (val == null) { return val; } if (datas[t].dataFormatStrWeb != null) { return moment(val).format(datas[t].dataFormatStrWeb); } else { return moment(val).format('YYYY-MM-DD HH:mm:ss'); } }; } else if (datas[t].name.indexOf('process_status') > -1) { column.render = (val) => (val ? (val === '0' ? '审核通过' : '审核未通过') : null); } else if (datas[t].extendTypeId && datas[t].extendTypeId.indexOf('file') > -1) { //特殊处理附件 column.render = (val) => { if (this.isJSON(val)) { val = JSON.parse(val); let files = val.files; let xx = ( <ul> {files.map((f, index2) => { return ( <li key={index2}> <FilePreview path={queryFileUrl(f.path)} pathName={f.name} /> </li> ); })} </ul> ); return xx; } else { return val; } }; } else { column.render = (val) => val && val.length > 100 ? ( <Tooltip title={val} overlayStyle={{ width: 1000 }}> <span style={{ width: column.width || 200, display: 'block', wordBreak: 'keep-all', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', }}> {val} </span> </Tooltip> ) : ( val ); } this.setState({ tableWidth: (datas.length - 1) * 200 }); this.columns.push(column); if (datas[t].isShowQuery) { querys.push(datas[t]); if (datas[t].referenceObjId != null) { refIds.push(datas[t].id); } if (datas[t].isGroupQuery != null) { getServicesNomal(getGroupListApi, { columnId: datas[t].id }).then(gourp => { groups[datas[t].id] = gourp; this.setState({ groups }); }); } } i++; } if (querys.length > 0) { this.setState({ querys }); if (refIds.length > 0) { getServicesNomal(getBatchOptionsApi, { ids: refIds }).then(options => { this.setState({ options }); }) } } this.getPage(); } }); } }; sqlBs16 = this.props.sql; getPage = (params, values, callPage, callback) => { if (this.columns == null || this.columns.length == 0) { return; } const { json: { treeParentIdName }, } = this.props; const pagination = this.state.data.pagination; if (params == null) { params = { // pageNo: pagination.current ? pagination.current : 1, //pageSize: pagination.pageSize ? pagination.pageSize : (this.props.pageSize||10), query: JSON.stringify(values != null ? values : this.state.formValues), }; } if (this.props.objCode && (this.props.objCode == '1' || this.props.objCode == 1)) { if (callPage) { callPage(params, (data) => { if (!this.state.isReady) { this.setState({ data, isReady: true }); } else { this.setState({ data }); } }); } else if (this.props.value && this.props.value.getPage) { this.props.value.getPage(params, (data) => { if (!this.state.isReady) { this.setState({ data, isReady: true }); } else { this.setState({ data }); } }); } } else { getServicesNomal(getFormDataListApi, { custom: this.custom, ...params, parentIdName: treeParentIdName, sql: this.sqlBs16, dataObjId: this.state.objId, }).then((list) => { const data = { list: list, pagination: false, }; if (!this.state.isReady) { this.setState({ data, parentId: params.parentId, isReady: true }, () => { if (callback) callback(list); }); } else { this.setState({ data, parentId: params.parentId }, () => { if (callback) callback(list); }); } }); } }; handleStandardTableChange = (pagination, filtersArg, sorter) => { const filters = Object.keys(filtersArg).reduce((obj, key) => { const newObj = { ...obj }; newObj[key] = getValue(filtersArg[key]); return newObj; }, {}); const params = { pageNo: pagination.current, pageSize: pagination.pageSize, ...filters, query: JSON.stringify(this.state.formValues), }; if (sorter.field) { params.sorter = `${sorter.field}_${sorter.order}`; } this.getPage(params); }; handleAdd = (fields, isAdd) => { const { json: { treeParentIdName }, } = this.props; let params = { ...fields, }; params[treeParentIdName] = this.state.parentId; getServicesNomal(addFormDataApi, { params: params, objId: this.state.objId, isAdd: isAdd, isSelf: true, isView: false, }).then(() => { message.success('操作成功'); this.getPage({ parentId: this.state.parentId }, null, null, (list) => { const treeData = this.refesh(this.state.parentId, list, this.state.treeData); this.setState({ modalVisible: false, treeData, }); }); }); }; handleModalVisible = () => { this.setState({ modalVisible: this.state.modalVisible ? false : true, formData: {}, }); }; add = () => { // if (this.state.formItem.length < 10) { this.getOptions(); this.setState({ modalVisible: true, formData: {}, isAdd: true, isView: false, }); }; handleSelectRows = (rows) => { if (this.props.onSelectRow) { this.props.onSelectRow(rows); } this.setState({ selectedRows: rows, }); }; batchDelete = (e) => { const { selectedRows } = this.state; if (!selectedRows) return; let columns = this.state.formItem; let Keys = {}; for (let i in columns) { if (columns[i].isPrimaryKey) { //key Keys[columns[i].name] = selectedRows.map((row) => row[columns[i].name]).join(','); } } getServicesNomal(deleteFormDataApi, { keys: JSON.stringify(Keys), objId: this.state.objId, isSelf: true, }).then(() => { this.setState({ selectedRows: [], }); this.getPage(); }); }; goBack = () => { router.goBack(); }; handleSearch = (e) => { e.preventDefault(); const { form } = this.props; const { formValues } = this.state; form.validateFields((err, fieldsValue) => { if (err) return; const formItem = this.state.formItem; formItem.map((item, index) => { if (item.type.indexOf('DATE') > -1) { for (let d in fieldsValue) { if (item.name === d && fieldsValue[d]) { if (fieldsValue[d] != null && fieldsValue[d].length > 0) { fieldsValue[d] = [ fieldsValue[d][0].format('YYYY-MM-DD HH:mm:ss'), fieldsValue[d][1].format('YYYY-MM-DD HH:mm:ss'), ]; } else { fieldsValue[d] = ''; } } } } }); const values = { ...this.state.formValues, ...fieldsValue, }; this.setState({ formValues: fieldsValue, }); this.getPage(null, values); }); }; hanldeHighSearch = (e) => { const pagination = this.props.formList.data.pagination; let params = { pageNo: pagination.current ? pagination.current : 1, pageSize: pagination.pageSize ? pagination.pageSize : this.props.pageSize || 10, ...e, }; this.setState({ formValues: { ...e, ...this.state.formValues } }); this.getPage(params); }; handleFormReset = () => { const { form } = this.props; form.resetFields(); this.setState( { formValues: {}, }, () => { this.getPage(); }, ); }; getItem = (isQuery, form, item, isAdd, formData, labelCol, wrapperCol) => { const { groups, isView } = this.state; if (item.isPrimaryKey) { if (isAdd) { return <></>; } else { return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? '' : formData[item.name], rules: [{ required: !item.isNull }], })(<Input style={{ width: '70%' }} readOnly={!isAdd} placeholder="请输入" />)} </FormItem> ); } } else if (item.referenceObjId != null) { const { options } = this.state; const ops = options[item.id + ''] || []; return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? '' : formData[item.name], rules: [{ required: !item.isNull }], })( <Select style={{ width: '70%' }} placeholder="请选择" allowClear> {ops.map((r) => ( <Option value={r[item.referenceCodeName]} key={r[item.referenceCodeName]}> {r[item.referenceNameName]} </Option> ))} </Select>, )} </FormItem> ); } else if (item.name.indexOf('process_status') > -1) { return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? '' : formData[item.name], rules: [{ required: !item.isNull }], })( <Select style={{ width: '70%' }} placeholder="请选择" allowClear> <Option value={'0'} key={'0'}> 审核通过 </Option> <Option value={'2'} key={'2'}> 审核未通过 </Option> </Select>, )} </FormItem> ); } else if (item.extendTypeId && item.extendTypeId.indexOf('file') > -1) { //特殊处理附件 如果是查询就 跳过 if (isQuery) return; return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? '' : formData[item.name] && this.isJSON(formData[item.name]) ? JSON.parse(formData[item.name]) : null, rules: [{ required: !item.isNull }], })(<UploadCom disabled={isView} />)} </FormItem> ); } else if (isQuery && item.isGroupQuery != null && item.isGroupQuery) { //如果是查询 并且是组合查询 const ops = groups[item.id + ''] || []; return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? '' : formData[item.name], rules: [{ required: !item.isNull }], })( <Select style={{ width: '70%' }} placeholder="请选择" allowClear> {ops.map((r) => ( <Option value={r.value} key={r.value}> {r.value} </Option> ))} </Select>, )} </FormItem> ); } else if (text.indexOf(item.type) > -1) { return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? '' : formData[item.name], rules: [{ required: !item.isNull }], })(<Input style={{ width: '70%' }} placeholder="请输入" />)} </FormItem> ); } else if (number.indexOf(item.type) > -1) { return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? '' : formData[item.name], rules: [{ required: !item.isNull }], })(<InputNumber placeholder="请输入" min={0} />)} </FormItem> ); } else if (isQuery && data.indexOf(item.type) > -1) { return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? null : moment(formData[item.name]), rules: [{ required: !item.isNull }], })( <RangePicker format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb} style={{ width: '95%' }} />, )} </FormItem> ); } else if (data.indexOf(item.type) > -1) { return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? moment() : formData[item.name] ? moment(formData[item.name]) : null, rules: [{ required: !item.isNull }], })( <DatePicker format={item.dataFormatStrWeb == null ? 'YYYY-MM-DD HH:mm:ss' : item.dataFormatStrWeb} style={{ width: '100%' }} placeholder="请输入" />, )} </FormItem> ); } else { return ( <FormItem labelCol={labelCol} wrapperCol={wrapperCol} label={item.title} key={item.id}> {form.getFieldDecorator(item.name, { initialValue: formData == null ? '' : formData[item.name], rules: [{ required: !item.isNull }], })(<Input style={{ width: '70%' }} placeholder="请输入" />)} </FormItem> ); } }; renderForm() { const { form, get } = this.props; const { querys } = this.state; if (querys.length == 0) { return ''; } return ( <Form layout="inline"> <Row style={{ padding: '15px' }}> {querys.map((item) => ( <Col style={{ height: 58 }} span={get === 'mobile' ? 24 : 8} key={item.id}> {this.getItem( true, form, { ...item, isNull: true, }, true, )} </Col> ))} <Col span={get === 'mobile' ? 24 : 8} style={{ textAlign: get === 'mobile' ? 'right' : '', paddingRight: get === 'mobile' ? 12 : '', }}> <span className={styles.submitButtons}> <Button type="primary" loading={this.props.loading} onClick={this.handleSearch}> 查询 </Button> <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}> 重置 </Button> {/* <a style={{ marginLeft: 8 }} onClick={this.toggleForm}> 展开 <Icon type="down" /> </a> */} </span> </Col> </Row> </Form> ); } onSelect = (selectedKeys, info) => { if (info.selectedNodes.length > 0) { const parentId = selectedKeys[0] != '0-0' ? selectedKeys[0] : null; this.setState({ parentName: info.selectedNodes[0].props.title, parentId }); this.getPage({ parentId: parentId }); } }; onLoadData = (treeNode) => { return new Promise((resolve) => { if (treeNode.props.childs) { resolve(); return; } const parentId = treeNode.props.eventKey != '0-0' ? treeNode.props.eventKey : null; this.getList( { parentId: parentId }, (list) => { treeNode.props.dataRef.childs = list; this.setState({ treeData: [...this.state.treeData], }); resolve(); }, true, ); }); }; renderTreeNodes = (list) => { const { json: { treeTitleName, treeKeyName }, } = this.props; return list.map((item) => { item.title = item[treeTitleName]; item.key = item[treeKeyName]; if (item.childs) { return ( <TreeNode title={item[treeTitleName]} key={item.key} dataRef={item}> {this.renderTreeNodes(item.childs)} </TreeNode> ); } return <TreeNode {...item} dataRef={item} />; }); }; refesh = (parentId, list, data) => { if (parentId == null) { data[0].childs = list; return data; } for (var i = 0; i < data.length; i++) { if (data[i].key == parentId) { data[i].childs = list; break; } else { if (data[i].childs) { this.refesh(parentId, list, data[i].childs); } } } return data; }; render() { const { modalVisible, selectedRows, querys, tableWidth, rights, data, isReady } = this.state; if (!isReady) { return ( <div style={{ width: 20, margin: 'auto' }}> <Spin /> </div> ); } const { isFormCom, isSelect, get, callback, valueName, notShowBack, istableCom, // 是否有模板设计器调用 value: { btns }, json: { treeSpan }, loading, } = this.props; const { showMobileDiv, isView } = this.state; let scrollWidth = document.documentElement.clientWidth || document.body.clientWidth; //可使宽度 let isMobile = scrollWidth < 1200; if (document.querySelector('#previewDiv')) { isMobile = true; } let showDiv = document.querySelector('#mobelDiv') && document.querySelector('#mobelDiv')?.parentNode.clientWidth; const parentMethods = { handleAdd: this.handleAdd, handleModalVisible: this.handleModalVisible, formData: this.state.formData, formItem: this.state.formItem, isAdd: this.state.isAdd, getItem: this.getItem, isView: isView, }; if ( !isSelect && !rights.includes('edit') && !rights.includes('delete') && !rights.includes('view') && !rights.includes('viewProcess') ) { } else { let width = 0; if (rights && rights.includes('viewProcess')) { width = width + 75; } if (rights && rights.includes('view')) { width = width + 75; } if (rights && rights.includes('edit')) { width = width + 40; } if (rights && rights.includes('delete')) { width = width + 40; } const column = { title: '操作', fixed: 'right', width: width, render: (text, record) => { return ( <Fragment> <div style={{ textAlign: 'center' }}> {isSelect ? ( this.state.selects.includes(record[valueName]) ? ( <> <span>已选择</span> <Divider type="vertical" /> </> ) : ( <> <a onClick={callback.bind(this, record, this.columns)}>选择</a> <Divider type="vertical" /> </> ) ) : ( '' )} {rights && !rights.includes('view') ? ( '' ) : ( <> <a onClick={this.view.bind(this, record)}>查看详情</a> <Divider type="vertical" /> </> )} {rights && !rights.includes('edit') ? ( '' ) : ( <> <a onClick={this.modify.bind(this, record)}>编辑</a> <Divider type="vertical" /> </> )} {rights && rights.includes('viewProcess') && record.process_biz_key ? ( <> <a onClick={this.viewProcess.bind(this, record)}>查看流程详情</a> <Divider type="vertical" /> </> ) : ( '' )} {rights && !rights.includes('delete') ? ( '' ) : ( <> {' '} <Popconfirm title="确定删除该数据?" onConfirm={this.delete.bind(this, record)} okText="确定" cancelText="取消"> <a>删除</a> </Popconfirm> </> )} </div> </Fragment> ); }, }; if (this.columns.length > 0 && this.columns[this.columns.length - 1].title == '操作') { this.columns[this.columns.length - 1] = column; } else { this.columns.push(column); } } if (this.columns) { /** * 计算总长度 */ AllWidth = 0; this.columns = this.columns.map((item, index) => { if (isEmpty(item)) { return item; } if ( index === this.columns.length - 1 && this.columns[this.columns.length - 1].title !== '操作' ) { AllWidth += 150; item.width = ''; return item; } let width = item.width ? item.width : 150; if (!item.width) { item.width = 150; } AllWidth += width; return item; }); if ( !isEmpty(this.columns[this.columns.length - 1]) && this.columns[this.columns.length - 1].title === '操作' ) { this.columns[this.columns.length - 2].width = ''; AllWidth += 100; } } const xxxx = ( <> <Row gutter={16}> <Col span={treeSpan}> <Card bordered={false} style={{ minHeight: 500 }}> <Tree showLine defaultExpandedKeys={['0-0']} onSelect={this.onSelect} loadData={this.onLoadData}> {this.renderTreeNodes(this.state.treeData)} </Tree> </Card> </Col> <Col span={24 - treeSpan}> <Card bordered={false} bodyStyle={{ padding: 0 }}> <div className={styles.tableList}> <div className={styles.tableListForm}>{this.renderForm()}</div> <div className={styles.tableListOperator}> {notShowBack ? ( notShowBack ) : ( <Button icon="rollback" type="primary" onClick={this.goBack}> 返回 </Button> )} {btns && btns.before && btns.before.length > 0 ? btns.before.map((r) => <Button {...r} />) : ''} {rights && !rights.includes('add') ? ( '' ) : ( <Button icon="plus" type="primary" onClick={this.add}> 新建 </Button> )} {rights && !rights.includes('searchData') ? ( '' ) : ( <SearchInfo hanldeHighSearch={this.hanldeHighSearch} objId={this.state.objId} /> )} {rights && !rights.includes('importData') ? ( '' ) : ( <ImportUtil objId={this.state.objId} /> )} {rights && !rights.includes('exportCurrent') ? ( '' ) : ( <ExportCurrentInfo objId={this.state.objId} query={JSON.stringify(this.state.formValues)} custom={ this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null } sql={Base16Encode(this.props.sql)} /> )} {this.props.value && this.props.value.exportConfig ? this.props.value.exportConfig.map((r, i) => ( <ExportCurrentInfo objId={this.state.objId} query={JSON.stringify(this.state.formValues)} custom={ this.props.value ? Base16Encode(JSON.stringify(this.props.value)) : null } index={i} btn={r.btn} ext={r.ext ? r.ext : 'xlsx'} sql={Base16Encode(this.props.sql)} /> )) : ''} {rights && !rights.includes('exportData') ? ( '' ) : ( <ExportInfo objId={this.state.objId} /> )} {rights && !rights.includes('statistics') ? ( '' ) : ( <StatisticsInfo objId={this.state.objId} /> )} {rights && !rights.includes('delete') ? '' : selectedRows.length > 0 && ( <span> <Popconfirm title="确定删除该数据?" onConfirm={this.batchDelete} okText="确定" cancelText="取消"> <Button>批量删除</Button> </Popconfirm> </span> )} {btns && btns.after && btns.after.length > 0 ? btns.after.map((r) => <Button {...r} loading={loading} />) : ''} </div> {!istableCom || (this.props.value && this.props.value.columns) ? ( <StandardTable showHeader={this.props.showHeader != null ? this.props.showHeader : true} noSelectRow={ this.props.onSelectRow == null && (rights == null || !rights.includes('delete')) } rowKey="id" data={data} isHiddenPage={this.props.isHiddenPage != null ? this.props.isHiddenPage : false} columns={this.columns} scroll={this.props.value && this.props.value.columns ? {} : { x: AllWidth }} selectedRows={selectedRows} onSelectRow={this.handleSelectRows} onChange={this.handleStandardTableChange} loading={this.props.loading} /> ) : ( <div id="mobelDiv" style={{ overflow: 'hidden', width: isMobile ? showMobileDiv : showDiv, height: '100%', }}> <div> {get === 'mobile' ? <div>手机端,请将手机横屏查看</div> : null} {showDiv && ( <StandardTable showHeader={this.props.showHeader != null ? this.props.showHeader : true} noSelectRow={ this.props.onSelectRow == null && (rights == null || !rights.includes('delete')) } rowKey="id" data={data} columns={this.columns} scroll={ this.props.value && this.props.value.columns ? {} : { x: AllWidth } } selectedRows={selectedRows} isHiddenPage={ this.props.isHiddenPage != null ? this.props.isHiddenPage : false } onSelectRow={this.handleSelectRows} onChange={this.handleStandardTableChange} loading={this.props.loading} /> )} </div> </div> )} </div> </Card> </Col> </Row> <CreateForm {...parentMethods} modalVisible={modalVisible} /> </> ); if (isFormCom) { return xxxx; } return <PageHeaderWrapper title="">{xxxx}</PageHeaderWrapper>; } } export default TreeList;