import React,{useState }from 'react'
import { Table, Space,Button,Modal,Input, Form, Row, Col, Select, DatePicker }from 'antd';
import { SearchOutlined }from '@ant-design/icons';
import { HighlightTwoTone }from '@ant-design/icons';
import momentfrom 'moment';
import {inject,observer}from 'mobx-react'
import axiosfrom '../../util/axios'
import apifrom '../../api/index'
import localefrom 'antd/lib/date-picker/locale/zh_CN';
import 'moment/locale/zh-cn'
import OPinionfrom "../../api/opinion";
import { Pagination }from 'antd'; // 引入組件
moment.locale('zh-cn')
const {TextArea } = Input;
const { confirm } = Modal;
const {Option } = Select;
const { RangePicker } = DatePicker;
const dateFormat ='YYYY-MM-DD';
@inject('Op','Opchaxun')
@observer
class TaskListextends React.Component {
constructor(prors){
super(prors)
this.state={
SelectName:'',// 搜索名
? ? ? ? ? ? current:1, // 當前頁
? ? ? ? ? ? pagesize:5 ,//每頁條
? ? ? ? ? ? dataq:[], // 列表數(shù)組
? ? ? ? ? ? user_phone:'',
? ? ? ? ? ? user_nickname:'',
? ? ? ? ? ? Count:0
? ? ? ? }
}
//分頁
? ? onChangePage = page => {
console.log(page)// 切換的數(shù)值
//使用異步操作 因為改變數(shù)值和發(fā)起請求同步執(zhí)行 結(jié)果出錯
? ? ? ? new Promise((resolve, reject) => {
this.setState({
current: page, // 改變值
? ? ? ? ? ? });
? ? ? ? ? ? resolve()
}).then(() => {
axios.post('/opinion/queryOpinion.do',{
'page':this.state.current,
? ? ? ? ? ? ? ? 'pageSize':this.state.pagesize
? ? ? ? ? ? }).then((res)=>{
console.log(res.data)
if (res.data.code){
this.setState({
data:res.data.data,
? ? ? ? ? ? ? ? ? ? ? ? Count:res.count
? ? ? ? ? ? ? ? ? ? })
}else {
this.error('加載出錯')
}
}).catch((err)=>{
console.log(err)
})
})
};
? ? // 刪除彈框
? ? showDeleteConfirm() {
confirm({
title:'是否確認刪除?',
? ? ? ? ? ? okText:'確認',
? ? ? ? ? ? okType:'danger',
? ? ? ? ? ? cancelText:'取消',
? ? ? ? ? ? // 點擊確認觸發(fā)
? ? ? ? ? ? onOk() {
console.log('點擊確認觸發(fā)');
? ? ? ? ? ? },
? ? ? ? ? ? // 點擊取消觸發(fā)
? ? ? ? ? ? onCancel() {
console.log(' 點擊取消觸發(fā)');
? ? ? ? ? ? },
? ? ? ? });
? ? }
// 編輯彈框
? ? showUpdateConfirm(data) {
confirm({
icon:<HighlightTwoTone />,
? ? ? ? ? ? title:'查看詳情',
? ? ? ? ? ? content:(
? ? ? ? ? ? ? ? ? ? style={{marginLeft:'-12px'}}
labelCol={{span:6 }}
wrapperCol={{span:14 }}
layout="horizontal"
? ? ? ? ? ? ? ? ? ? onFinish={this.onFinish}
initialValues={{
user_nickname: data.user_nickname,
? ? ? ? ? ? ? ? ? ? ? ? opinion_time:data.opinion_time,
? ? ? ? ? ? ? ? ? ? ? ? opinion_msg:data.opinion_msg,
? ? ? ? ? ? ? ? ? ? }}
>
? ? ? ? ? ? ? ? ? ? <Form.Item name='user_nickname' label="投訴人">
? ? ? ? ? ? ? ? ? ? ? ? <Input? placeholder="large size"? />
? ? ? ? ? ? ? ? ? ? <Form.Item name='opinion_msg' label="意見">
? ? ? ? ? ? ? ? ? ? ? ? ? ? autoSize={{minRows:3, maxRows:5 }}
style={{height:'100px'}}
placeholder="large size" />
? ? ? ? ? ? ? ? ? ? <Form.Item name='opinion_time' label="提交時間">
? ? ? ? ? ? ? ? ? ? ? ? <Input? ? placeholder="large size"/>
? ? ? ? ? ? ? ? ? ? <Button type="primary" htmlType="submit" className="login-form-button">
? ? ? ? ? ? ? ? ? ? ? ? Log in
? ? ? ? ? ? ),
? ? ? ? ? ? okText:'提交',
? ? ? ? ? ? cancelText:'取消',
? ? ? ? ? ? // 點擊確認觸發(fā)
? ? ? ? ? ? onOk() {
console.log('編輯成功');
? ? ? ? ? ? },
? ? ? ? ? ? // 點擊取消觸發(fā)
? ? ? ? ? ? onCancel() {
console.log('Cancel');
? ? ? ? ? ? },
? ? ? ? });
? ? }
// 獲取表單數(shù)據(jù)
? ? onFinish = values => {
console.log('Received values of form: ', values);
? ? }
// 編輯
? ? update(text,record,index){
this.showUpdateConfirm(record)
console.log(text,record,index)
}
// 刪除
? ? del(text,record,index){
this.showDeleteConfirm()
console.log(text,record,index)
}
// 搜索手機號
? ? selectNanme = (e) => {
this.setState({
SelectName: e.target.value
? ? ? ? })
}
SelectBut() {
console.log(this.state.SelectName)
console.log("搜索手機號的結(jié)果")
this.props.Opchaxun.caxunList(this.state.SelectName).then((data) => {
this.setState({
dataq:data.data.data, // 改變顯示表格的值
? ? ? ? ? ? ? ? Count:data.data.count // 改變頁碼總條數(shù)
? ? ? ? ? ? })
console.log(this.state.dataq)
})
}
//搜索昵稱
? ? selectNanme2 = (e) => {
this.setState({
SelectName: e.target.value
? ? ? ? })
}
SelectBut2() {
console.log(this.state.SelectName)
console.log("搜索昵稱的結(jié)果")
console.log(this.props.Opchaxun)
this.props.Opchaxun.caxunList(this.state.SelectName).then((data) => {
this.setState({
dataq:data.data.data, // 改變顯示表格的值
? ? ? ? ? ? ? ? Count:data.data.count // 改變頁碼總條數(shù)
? ? ? ? ? ? })
})
}
//請求后臺
? ? componentDidMount(){
axios.post('/opinion/queryOpinion.do',{
'page':this.state.current,
? ? ? ? ? ? 'pageSize':this.state.pagesize
? ? ? ? }).then((res)=>{
console.log(res.data)
if (res.data.code){
this.setState({
dataq:res.data.data
? ? ? ? ? ? ? ? })
}else {
this.error('加載出錯')
}
}).catch((err)=>{
console.log(err)
})
}
render() {
const columns = [
{
title:'用戶ID',
? ? ? ? ? ? ? ? dataIndex:'opinion_no',
? ? ? ? ? ? ? ? width:150,
? ? ? ? ? ? },
? ? ? ? ? ? {
title:'用戶手機號',
? ? ? ? ? ? ? ? dataIndex:'user_phone',
? ? ? ? ? ? ? ? width:150,
? ? ? ? ? ? },
? ? ? ? ? ? {
title:'用戶昵稱',
? ? ? ? ? ? ? ? dataIndex:'user_nickname',
? ? ? ? ? ? },
? ? ? ? ? ? {
title:'提交時間',
? ? ? ? ? ? ? ? dataIndex:'opinion_time',
? ? ? ? ? ? ? ? render: (value) => {
const obj = {
children: JSON.stringify(value).substring(1,11)
};
? ? ? ? ? ? ? ? ? ? return obj;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? {
title:'意見和建議',
? ? ? ? ? ? ? ? dataIndex:'opinion_msg',
? ? ? ? ? ? },
? ? ? ? ? ? {
title:'操作',
? ? ? ? ? ? ? ? dataIndex:'address',
? ? ? ? ? ? ? ? render: (text, record,index) => (
<Space size="middle">
? ? ? ? ? ? ? ? ? ? ? ? <Button size='small' onClick={()=>this.update(text,record,index)}>查看
? ? ? ? ? ? ? ? ? ? ? ? <Button type="primary" danger size='small' onClick={()=>this.del(text,record,index)}> 刪除
? ? ? ? ? ? ? ? )
}
];
? ? ? ? return (
//搜索
? ? ? ? ? ? ? ? ? ? <Col span={24}>
? ? ? ? ? ? ? ? ? ? ? ? <Input? name='username'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? placeholder=" 請輸入用戶手機號查詢"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style={{width:'300px', float:'left' }}
onChange={this.selectNanme}/>
? ? ? ? ? ? ? ? ? ? ? ? ? ? name='username2'
? ? ? ? ? ? ? ? ? ? ? ? ? ? placeholder="請輸入用戶昵稱查詢"
? ? ? ? ? ? ? ? ? ? ? ? ? ? style={{width:'300px', float:'left' }}
onChange={this.selectNanme2}/>
? ? ? ? ? ? ? ? ? ? ? ? <Button shape="circle"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon={<SearchOutlined />}
size='small'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? style={{float:'left', marginLeft:'10px', marginTop:'5px' }}
onClick={this.SelectBut.bind(this)}/>
? ? ? ? ? ? ? ? ? ? ? ? ? ? shape="circle"
? ? ? ? ? ? ? ? ? ? ? ? ? ? icon={<SearchOutlined />}
size='small'
? ? ? ? ? ? ? ? ? ? ? ? ? ? style={{float:'left', marginLeft:'10px', marginTop:'5px' }}
onClick={this.SelectBut2.bind(this)}/>
? ? ? ? ? ? ? ? ? ? <Col span={24}>
? ? ? ? ? ? ? ? ? ? ? ? <Table pagination={false}columns={columns}dataSource={this.state.dataq}scroll={{y:240 }}/>,
? ? ? ? ? ? ? ? ? ? current={this.state.current}// 總條數(shù) 綁定state中的值
? ? ? ? ? ? ? ? ? ? onChange={this.onChangePage}// 改變頁面是發(fā)生的函數(shù)
? ? ? ? ? ? ? ? ? ? total={(Math.ceil(this.state.Count /this.state.pageSize)) *10}
// 頁碼數(shù)量 = 向上取整（總條數(shù)/每頁條數(shù)）X10
? ? ? ? ? ? ? ? ? ? showSizeChanger={false}// 總條數(shù)超過多少條顯示也換條數(shù)
? ? ? ? ? ? ? ? ? ? style={{marginTop:'20px' }}
/>
? ? ? ? )
}
}
export {TaskList asdefault}
