import React, { PureComponent } from 'react';
import './styles.less';
import { connect } from 'react-redux'
import { Table, Divider, Tag, Button, message, Popconfirm } from 'antd';
import _ from 'loadsh'
import qs from 'qs'
import defaultImg from '@/static/error.png'
import { get } from '@/utils'
import request from '@/utils'
import ModalGo from './model'
// import { requestx } from '@/utils'
// import Loding from './loding'
export default @connect(state => ({
table_Data: state.table_Data
}), {
getTableData: items => ({
type: 'TBALE_DATA',
payload: items
})
})
class extends PureComponent {
constructor(props) {
super(props)
this.state = {
data: [],
visible: false,
title: '', // 编辑 添加 标题
btnName: '', // 按钮 提示文字
editData: [], // 点击编辑的回显 数据
}
this.datas()
}
// 图片报错 显示 默认图片
errorImg = e => {
e.target.setAttribute('src', defaultImg)
}
// 获取全部数据
datas = () => {
const { getTableData } = this.props
get('/api/banner/list')
.then(res => {
getTableData(res)
})
}
// 删除 确定
confirm = items => {
request('/api/banner/delete', qs.stringify({ id: items.id }))
.then(res => {
// if (res.data.code === 200) {
message.success('删除成功')
// }
this.datas()
})
}
// 点击编辑按钮
edit = items => {
this.setState({
visible: true,
title: '编辑',
btnName: '保存',
editData: items
})
}
// 点击添加按钮 显示
addData = () => {
this.setState({
visible: true,
title: '添加',
btnName: '点击添加',
editData: []
})
}
// 接受回调函数 关闭model
visStatus = v => {
this.setState({
visible: v
})
}
// 点击下载
download = () => {
const { table_Data } = this.props
const blob = new Blob([JSON.stringify(table_Data)], { type: 'text/plain' }) //{type : 'application/json'}
let a = document.createElement('a')
let url = URL.createObjectURL(blob)
a.href = url
a.download = '表格数据'
a.click()
setTimeout(() => {
//删除创建的URL
window.URL.revokeObjectURL(url)
}, 0)
}
render() {
// const { table_Data } = this.props
const table_Data = _.get(this.props, 'table_Data', '暂无数据...')
const { visible, title, btnName, editData } = this.state
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: '130px',
ellipsis: true,
},
{
title: '名称',
dataIndex: 'title',
key: 'Title',
ellipsis: true,
},
{
title: '图片',
dataIndex: 'bannerUrl',
key: 'bannerUrl',
render: (tags, items) => (
<img src={items.bannerUrl} onError={this.errorImg} />
),
}, {
title: '描述',
dataIndex: 'mark',
key: 'mark',
width: '150px',
ellipsis: true,
}, {
title: '排序',
dataIndex: 'sort',
key: 'sort',
width: '100px',
ellipsis: true,
sorter: (a, b) => a.sort - b.sort,
},
{
title: '状态',
key: 'status',
dataIndex: 'status',
render: (tags, items) => (
<span>
{items.status == 0 ? <Tag color="red">禁用</Tag> : <Tag color="green">启用</Tag>}
</span>
),
},
{
title: '操作',
key: 'action',
width: '230px',
render: (text, record) => (
<span>
<Button type="primary" onClick={() => this.edit(record)}>编辑</Button>
<Divider type="vertical" />
<Popconfirm title="确定删除 ?" okText="Yes" cancelText="No" onConfirm={() => this.confirm(record)}>
<Button type="danger" >删除</Button>
</Popconfirm>
</span>
),
},
];
return (
<div className='homeRightTable'>
{/* 添加 */}
<Button type="primary" onClick={this.addData}>
添加
</Button>
<Button type="danger" onClick={() => this.download()} style={{ marginLeft: '20px' }}>
下载
</Button>
{/* 对话框 */}
<ModalGo
visible={visible} // 控制 开关
title={title} //标题
visibleStatus={this.visStatus} //关闭 model
btnName={btnName} //btn 文字提示
editData={editData}
/>
<Table columns={columns} dataSource={table_Data} rowKey={v => v.id} />
</div>
);
}
}
// Model
import React from 'react';
import rquest from '@/utils'
import { connect } from 'react-redux'
import qs from 'qs'
import {
Modal,
Form,
Input,
Icon,
Button,
Upload,
Radio,
InputNumber,
message,
} from 'antd';
import { get } from '../../utils';
// 对话框
export default @connect(state => ({
}), {
getData: () => ({
type: 'TBALE_DATA',
payload: get('/api/banner/list')
})
})
@Form.create({
name: 'register',
mapPropsToFields(props) {
return Object.entries(props.editData).reduce((v0, [k, v]) => {
v0[k] = Form.createFormField({
value: v,
})
return v0
}, {})
// return {
// name: Form.createFormField({
// value: props.data.name,
// }),
// }
}
})
class extends React.Component {
state = {
visible: false,
confirmDirty: false,
autoCompleteResult: [],
value: 1,
bannerUrl: '',
disalblex: false, // 点击确定按钮 loding
};
showModal = () => {
this.setState({
visible: true,
});
};
// 关闭model
handleCancel = () => {
this.props.visibleStatus(false)
};
// 点击 提交
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
const { bannerUrl } = this.state
const { getData, btnName, editData } = this.props
if (btnName === '点击添加') {
this.setState({
disalblex: true,
});
setTimeout(() => {
this.setState({
disalblex: false,
});
}, 2000);
rquest('/api/banner/add', qs.stringify({
...values,
bannerUrl
}))
.then(res => {
console.log(res);
if (res) {
message.success('添加成功')
this.handleCancel() //关闭
getData() //获取数据
}
})
} else {
rquest('/api/banner/update', qs.stringify({
...values,
bannerUrl,
id: editData.id
}))
.then(res => {
// if (res.data.code === 200) {
message.success('编辑成功')
this.handleCancel() //关闭
getData() //获取数据
// }
})
}
}
});
};
// 自定义 校验
validatorFun = (rule, value, callback) => {
// 数字和字母组合
// /^[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*$/
const reg = /^(?![A-Za-z0-9]+$)[\u4e00-\u9fa5A-Za-z0-9]*$/
if (value && !value.match(reg)) {
callback('请输入至少一个汉字');
}
callback()
}
// 图片上传
normFile = e => {
// console.log('Upload event:', e.file.response);
if (e.file.response) {
this.setState({
bannerUrl: e.file.response.data.url
})
}
return e && e.fileList;
};
// 状态
onChange = e => {
this.setState({
value: e.target.value,
});
};
render() {
const { visible, title, btnName } = this.props
const { getFieldDecorator } = this.props.form;
const { disalblex } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 9 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 14,
offset: 6,
},
},
};
return (
<div>
<Modal
title={title}
visible={visible}
footer={null}
onCancel={this.handleCancel}
>
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
<Form.Item label="标题">
{getFieldDecorator('title', {
rules: [
{
validator: this.validatorFun
},
{
required: true,
message: '请输入标题 !',
},
],
})(<Input />)}
</Form.Item>
<Form.Item label="上传图片" extra="">
{getFieldDecorator('upload', {
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
})(
<Upload name="file" action="http://49.235.147.95:3001/api/uploadFile" listType='picture'>
<Button>
<Icon type="upload" /> 上传图片
</Button>
</Upload>,
)}
</Form.Item>
<Form.Item label="状态" >
{getFieldDecorator('status', {
})(
<Radio.Group >
<Radio value={1}>启用</Radio>
<Radio value={0}>禁用</Radio>
</Radio.Group>
)}
</Form.Item>
<Form.Item label="排序">
{getFieldDecorator('sort', { initialValue: 3 })(<InputNumber />)}
</Form.Item>
<Form.Item label="描述信息">
{getFieldDecorator('mark', {})(<Input.TextArea rows={4} />)}
</Form.Item>
<Form.Item {...tailFormItemLayout}>
<Button type="primary" htmlType="submit" disabled={disalblex}>
{btnName}
</Button>
<Button className='resetBtn' style={{ marginLeft: '30px' }}>
重置
</Button>
</Form.Item>
</Form>
</Modal>
</div>
);
}
}