index.js

import React, { Component } from "react";
import storage from "@src/utils/localStorage";
import { Row, Col, Table, Form, Button, Input, Select, Modal, message } from "antd";
import axios from "@src/axios/index";
import { withRouter } from 'react-router-dom'

import Utils from "@src/utils/utils";
import { UserManageBar } from "@components/Common";
import { API_SURVEY_MANAGE } from "@src/Api";

const FormItem = Form.Item;
const Option = Select.Option;

@withRouter
class HealthNotice extends Component {
  state = {
    loading: false, //给表格的loading层
    list: [], //表格数据

    defaultExpandAllRows: false, // 是否展开控制
    searchForm: {}, // 搜索的表单
    expandStatus: false,
    btnAuth: null,
    isShowOpt: true
  };
  params = {
    pageSize: 10,
    pageNum: 1
  };

  componentWillMount() {
    const btnAuth = storage.get("btnAuth");
    if (!btnAuth) {
      window.location.href = '#/login'
      return
    }
    this.setState({ btnAuth });
    if (
      btnAuth.indexOf("sys-param-edit") === -1 &&
      btnAuth.indexOf("sys-param-delete") === -1
    ) {
      this.setState({ isShowOpt: false });
    }
  }

  componentDidMount() {
    this.getSysParamList();
  }

  queryList = () => {
    this.params.pageNum = 1;
    this.getSysParamList();
  };

  getSysParamList = () => {
    let _this = this;
    let searchData = this.props.form.getFieldsValue();
    this.setState({
      loading: true
    });

    axios.ajax({
      url: API_SURVEY_MANAGE.getQuestionList,
      data: {
        ...this.params,
        ...searchData
      }
    }).then(res => {
      if (res && res.records && res.records.length >= 0) {
        let list = res.records.map((item, index) => {
          return { ...item, key: index };
        });
        this.setState({
          list,
          loading: false,
          pagination: Utils.pagination(res, current => {
            _this.params.pageNum = current;
            _this.setState({ isLoading: true });
            this.getSysParamList();
          })
        });
      }
    });
  };

  //重置表单
  reset = () => {
    this.props.form.resetFields();
    let searchInfo = Utils.trim(this.props.form.getFieldsValue());
    this.setState({ searchInfo }, () => {
      this.getSysParamList();
    });
  };

  // 展开条件
  expandMenu = () => {
    this.setState({
      expandStatus: !this.state.expandStatus
    });
  };

  update = (item, paramName, paramKeyName, paramKeyValue, description, id) => {
    let obj = { paramName, paramKeyName, paramKeyValue, description, id };
    this.props.history.push({
      pathname: `/home/healthNotice/update/${obj.id}`,
    });
  }

  copySurvey = (item, record) => {
    axios.ajax({
      url: API_SURVEY_MANAGE.copySurvey,
      data: {
        fromId: record.id,
        surveyName: record.surveyName,
        tag: record.surveyTag,
      }
    }).then(res => {
      // console.log(res)
      if (res) {
        this.getSysParamList();
        this.setState({
          loading: false
        }, () => {
          message.success('复制成功！')
        })
      }
    })
  }

  delete = (item, record) => {
    Modal.confirm({
      title: '删除',
      content: `您要删除的问卷名称为 : ${record.surveyName} ？`,
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        axios.ajax({
          url: API_SURVEY_MANAGE.deleteById,
          data: {
            surveyId: record.id
          }
        }).then(res => {
          console.log(res);
          message.success('删除成功');
          this.params.pageNum = 1;
          this.getSysParamList();

          if (res && res.records && res.records.length >= 0) {
            let list = res.records.map((item, index) => {
              return { ...item, key: index };
            });
            this.setState({
              list,
              loading: false,
            })
          }
        })
      }
    })

  }

  createSurvey = () => {
    axios.ajax({
      url: API_SURVEY_MANAGE.createSurvey,
      data: {
        name: ''
      }
    }).then(res => {
      if (res) {
        this.props.history.push({
          pathname: `/home/healthNotice/add/${res}`,
        });
      }
    })
  }

  render() {
    let loading = this.state.loading;

    const { getFieldDecorator } = this.props.form;
    const columns = [
      {
        title: "问卷",
        dataIndex: "surveyName",
        className: "tdWidth",
        key: "surveyName",
        render: surveyName => {
          return Utils.formatTableColumn(surveyName);
        }
      },

      {
        title: "创建时间",
        dataIndex: "createDate",
        key: "createDate",
        className: "tdWidth",
        render: createDate => {
          return Utils.formatTableColumn(createDate);
        }
      },
      {
        title: "收集数",
        dataIndex: "answerNum",
        key: "answerNum",
        className: "tdWidth",
        render: answerNum => {
          return Utils.formatTableColumn(answerNum);
        }
      },
      {
        title: "状态",
        dataIndex: "surveyState",
        key: "surveyState",
        className: "tdWidth",
        render(surveyState) {
          return {
            0: "默认设计状态",
            1: "执行中",
            2: "结束"
          }[surveyState];
        }
      }
    ];
    if (this.state.isShowOpt) {
      columns.push({
        title: "操作",
        key: "opereate",
        width: 300,
        // className: "pRight",
        align: "center",
        render: record => {
          let id = record.id,
            item = record;
          let { paramName, paramKeyName, paramKeyValue, description } = record;

          return (
            <div style={{ display: "flex", flex: 1, justifyContent: 'space-between', alignItem: 'center' }} >
              {this.state.btnAuth.indexOf("sys-param-edit") !== -1 ? (
                <Button
                  size="small"
                  style={{ marginRight: 15 }}
                  onClick={item => {
                    this.update(
                      item,
                      paramName,
                      paramKeyName,
                      paramKeyValue,
                      description,
                      id
                    );
                  }}
                >
                  修改
                </Button>
              ) : (
                  ""
                )}

              {this.state.btnAuth.indexOf("sys-param-delete") !== -1 ? (
                <Button
                  size="small"
                  // onClick={item => this.delete(item, record)}
                  onClick={item => item}
                >
                  分析报告
                </Button>
              ) : (
                  ""
                )}

              {this.state.btnAuth.indexOf("sys-param-delete") !== -1 ? (
                <Button
                  size="small"
                  onClick={item => this.copySurvey(item, record)}
                >
                  复制
                </Button>
              ) : (
                  ""
                )}

              {this.state.btnAuth.indexOf("sys-param-delete") !== -1 ? (
                <Button
                  size="small"
                  onClick={item => this.delete(item, record)}
                >
                  删除
                </Button>
              ) : (
                  ""
                )}
            </div>
          );
        }
      });
    }
    return (
      <div className="dictBg">
        <div className="system">
          <div className="searchWrap">
            <UserManageBar title="健康告知列表" />
            <div
              className="expandMenu iconfont icon-chazhaobiaodanliebiao"
              onClick={this.expandMenu}
            />
            {this.state.expandStatus ? (
              <div className="systemSearch">
                <Form layout="horizontal">
                  <Row gutter={24}>
                    <Col span="6">
                      <FormItem>
                        <label htmlFor="名称">名称</label>
                        {getFieldDecorator("name", {})(
                          <Input placeholder="名称" />
                        )}
                      </FormItem>
                    </Col>
                    <Col span="6">
                      <FormItem>
                        <label htmlFor="状态">状态</label>
                        {getFieldDecorator("surveyState", {})(
                          <Select placeholder="状态" allowClear={true}>
                            <Option value={""}>不限</Option>
                            <Option value={0}>默认设计状态</Option>
                            <Option value={1}>执行中</Option>
                            <Option value={2}>结束</Option>
                          </Select>
                        )}
                      </FormItem>
                    </Col>
                    <Col span="4">
                      <FormItem style={{ marginTop: 38 }}>
                        <Button
                          onClick={item => {
                            this.queryList(item);
                          }}
                          style={{
                            background: "#00BB29",
                            color: "#fff",
                            marginRight: 4
                          }}
                        >
                          查询
                        </Button>
                        <Button
                          onClick={this.reset}
                          style={{ background: "#ED1719", color: "#fff" }}
                          type="danger"
                        >
                          重置
                        </Button>
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </div>
            ) : (
                ""
              )}
          </div>

          <div className="operate">
            {this.state.btnAuth && this.state.btnAuth.indexOf("health-notice-add") == -1 ? (
              <Button onClick={this.createSurvey}>新 增</Button>
            ) : (
                ""
              )}
          </div>

          <UserManageBar title="详细数据" />

          <div className="detData reTable" style={{}}>
            <div style={{ backgroundColor: "#fff", minHeight: "500px" }}>
              <Table
                rowKey="id"
                // key={`table-${this.state.list && this.state.list.length}`}
                bordered={false}
                columns={columns}
                selections={false}
                defaultExpandAllRows={false}
                childrenColumnName="childDicts"
                loading={loading}
                dataSource={this.state.list}
                onExpand={this.onExpand}
                handleScollChange={200}
                indentSize={12}
                // scroll={{ x: '105%' }}
                pagination={this.state.pagination}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Form.create()(HealthNotice);