kede-client/js/component/manageCenter/standard/stList/index.jsx

import React from 'react';
import $ from 'jquery/src/ajax';
import {
  Form, Icon, Button, Input, Select, AutoComplete, Spin, Table,
  message, DatePicker, Modal, Tabs
} from 'antd';
import moment from 'moment';
import { ShowModal, splitUrl } from '../../../tools.js';
import { ChooseList } from "../../order/orderNew/chooseList";
import "./index.less";
import ImgList from "../../../common/imgList";

const PicturesWall = React.createClass({

  getInitialState() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: this.props.pictureUrl,
    };
  },

  getDefaultProps() {
    return {
      changeClick: this.modifyChange,
    };
  },

  handleCancel() {
    this.setState({ previewVisible: false });
  },

  handlePreview(file) {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  },

  handleChange(info) {
    let fileList = info.fileList;
    this.setState({ fileList });
    this.props.fileList(fileList);
  },

  componentWillReceiveProps(nextProps) {
    this.state.fileList = nextProps.pictureUrl;
  },

  render() {
    const { fileList } = this.state;
    return (
      <div style={{ display: "inline-block" }}>
        <ImgList
          isSupportPDF={true}
          domId={this.props.domId}
          uploadConfig={{
            action: globalConfig.context + "/api/admin/standard/uploadPicture",
            data: { sign: "standard_document" },
            multiple: true,
            listType: "picture-card",
          }}
          onChange={(infor) => {
            this.handleChange(infor);
          }}
          fileList={fileList}
        />
      </div>
    );
  },

});

const { TabPane } = Tabs
const FormItem = Form.Item;
const Standard = Form.create()(React.createClass({

  getInitialState() {
    return {
      searchValues: {},
      loading: false,
      changeList: undefined, // 更改后的表格显示数据
      dataSource: [],
      departmentArr: [],
      typeList: [
        { key: "国家标准", value: 0, },
        { key: "行业标准", value: 1, },
        { key: "地方标准", value: 2, },
        { key: "团体标准", value: 3, },
        { key: "国际标准", value: 4, },
      ],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 20,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return '共' + total + '条数据';
        }
      },
      columns: [
        {
          title: '标准编号',
          dataIndex: 'serialNumber',
          key: 'serialNumber',
        },
        {
          title: '标准名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '参考',
          dataIndex: 'reference',
          key: 'reference',
          render: (text, record) => <span>{['国家 ', '行业 ', '地方 ', '团体 ', '国际 '][record.type]}{text}</span>
        },
        {
          title: '部门',
          dataIndex: 'depName',
          key: 'depName',
        },
        {
          title: '负责人',
          dataIndex: 'adminName',
          key: 'adminName',
        },
        {
          title: '标准状态',
          dataIndex: 'status',
          key: 'status',
          render: text => <span style={{ color: ["red", "green"][text] }}>{["关闭", "开启"][text]}</span>
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          key: 'updateTime',
        },
        {
          title: '附件',
          dataIndex: 'url',
          key: 'url',
          render: (text, record, index) =>
            <div className='selStandard'>
              <ImgList
                fileList={text ? splitUrl(text, ',', globalConfig.avatarHost + '/upload') : []}
                domId={"selStandard" + index}
              />
            </div>
        },
      ],
      visible: "",
      data: {},
      orgCodeUrl: [],
    };
  },

  componentWillMount() {
    this.loadData();
    this.departmentList();
  },

  // 列表接口
  loadData(pageNo) {
    const { searchValues, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      pageNo: pageNo || 1,
      pageSize: pagination.pageSize,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/standard/list",
      data: datas,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            pagination.current = data.data.pageNo;
            pagination.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              pagination.current = 0;
              pagination.total = 0;
            }
            this.setState({
              dataSource: data.data.list,
              pagination: this.state.pagination,
              pageNo: data.data.pageNo,
            });
          } else {
            this.setState({
              dataSource: data.data,
              pagination: false,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  //部门
  departmentList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id
            });
          });
        }
        this.setState({
          departmentArr: theArr
        });
      }.bind(this)
    }).always(
      function () {

      }.bind(this)
    );
  },

  search() {
    this.loadData();
  },

  reset() {
    this.setState({
      searchValues: {}
    }, () => {
      this.loadData();
    })
  },

  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },

  addClick() {
    this.setState({
      visible: "add"
    })
  },

  tableRowClick(e) {
    if (!adminData.isSuperAdmin) {
      return
    }
    this.setState({
      visible: "edit",
    })
    this.getDetails(e.id)
    // const orgCodeUrl = e.url ? splitUrl(e.url, ',', globalConfig.avatarHost + '/upload') : []
    // this.setState({
    //   visible: "edit",
    //   data: e,
    //   orgCodeUrl,
    //   adminName: e.adminName,
    // })
  },

  getDetails(id) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/standard/get",
      data: {
        id,
      },
      success: function (data) {
        let thedata = data.data || {};
        let orgCodeUrl = []
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          };
        } else {
          orgCodeUrl = thedata.url ? splitUrl(thedata.url, ',', globalConfig.avatarHost + '/upload') : []
        }
        this.setState({
          data: thedata,
          orgCodeUrl,
          adminName: thedata.adminName,
        })
      }.bind(this),
    }).always(function () {
      this.setState({
        loading: false
      });
    }.bind(this));
  },

  getOrgCodeUrl(e) {
    this.setState({
      orgCodeUrl: e
    });
  },

  handleCancel() {
    this.setState({
      visible: "",
      adminName: undefined,
      data: {},
      orgCodeUrl: [],
    })
  },

  handleSubmit() {
    const { data } = this.state
    if (!data.serialNumber) {
      message.warning('标准编号不能为空！');
      return;
    }
    if (!data.name) {
      message.warning('标准名称不能为空！');
      return;
    }
    if (!data.depId) {
      message.warning('部门不能为空！');
      return;
    }
    if (!data.status && data.status != 0) {
      message.warning('请选择状态！');
      return;
    }
    let pictureUrl = "";
    if (this.state.orgCodeUrl.length) {
      let picArr = [];
      this.state.orgCodeUrl.map(function (item) {
        if (
          item.response &&
          item.response.data &&
          item.response.data.length
        ) {
          picArr.push(item.response.data);
        }
      });
      pictureUrl = picArr.join(",");
    }
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url:
        data.id
          ? globalConfig.context + '/api/admin/standard/update'
          : globalConfig.context + '/api/admin/standard/add',
      data: Object.assign(data, {
        url: pictureUrl,
      }),
    }).done(function (data) {
      this.setState({
        loading: false
      });
      if (!data.error.length) {
        message.success('保存成功！');
        this.handleCancel();
        this.loadData(this.state.pageNo);
      } else {
        message.warning(data.error[0].message);
      }
    }.bind(this));
  },

  followUp(e) {
    this.setState({
      adminName: e
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/listAdminByName",
      data: {
        adminName: e,
      },
      success: function (data) {
        let thedata = data.data || [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          fjlist: thedata,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  selectF(value) {
    const { data, fjlist } = this.state;
    const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
    this.setState({
      data: Object.assign(data, {
        aid: newdataSources.find((item) => item.name == value).id,
      }),
    });
  },

  render() {
    const { RangePicker } = DatePicker;
    let departmentArr = this.state.departmentArr || [];
    const { searchValues, data } = this.state
    const dataSources = this.state.fjlist || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    return (
      <div className="user-content">
        <div className="content-title">
          <Tabs defaultActiveKey="1" className="test">
            <TabPane tab="搜索" key="1">
              <div className="user-search" style={{ marginLeft: 10 }}>
                <Input
                  placeholder="请输入标准名称"
                  value={searchValues["name"]
                    ? searchValues["name"]
                    : ""}
                  onChange={(e) => {
                    searchValues["name"] = e.target.value;
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                />
                <Select
                  placeholder="请输入部门名称"
                  style={{ width: 230 }}
                  value={searchValues["depId"]
                    ? searchValues["depId"]
                    : undefined}
                  onChange={e => {
                    searchValues["depId"] = e;
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                >
                  {departmentArr.map(function (item) {
                    return (
                      <Select.Option key={item.id}>{item.name}</Select.Option>
                    );
                  })}
                </Select>
                <Select
                  placeholder="状态"
                  style={{ width: 140 }}
                  value={searchValues["status"]}
                  onChange={(e) => {
                    searchValues["status"] = e;
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                >
                  <Select.Option value={null}>全部</Select.Option>
                  <Select.Option value={0}>关闭</Select.Option>
                  <Select.Option value={1}>开启</Select.Option>
                </Select>
                <span>时间：</span>
                <RangePicker
                  style={{ width: 300 }}
                  value={[
                    searchValues.startTime ? moment(searchValues.startTime) : null,
                    searchValues.endTime ? moment(searchValues.endTime) : null,
                  ]}
                  onChange={(data, dataString) => {
                    this.setState({
                      searchValues: Object.assign(searchValues, {
                        startTime: dataString[0],
                        endTime: dataString[1],
                      }),
                    });
                  }}
                />
                <Button
                  type="primary"
                  onClick={this.search}
                  style={{ margin: "0 10px" }}
                >搜索</Button>
                <Button onClick={this.reset}>重置</Button>
              </div>
            </TabPane>
            <TabPane tab="更改表格显示数据" key="2">
              <div style={{ marginLeft: 10 }}>
                <ChooseList
                  columns={this.state.columns}
                  changeFn={this.changeList}
                  changeList={this.state.changeList}
                  top={55}
                  margin={11}
                />
              </div>
            </TabPane>
            {adminData.isSuperAdmin ?
              <TabPane tab="新增" key="3">
                <Button
                  type="primary"
                  className="addButton"
                  style={{ float: "left", marginBottom: 10, marginTop: 12 }}
                  onClick={this.addClick}
                >
                  新增
                </Button>
              </TabPane> : ""}
          </Tabs>
          <div className="patent-table">
            <Spin spinning={this.state.loading}>
              <Table
                bordered
                columns={
                  this.state.changeList
                    ? this.state.changeList
                    : this.state.columns
                }
                style={{
                  cursor: 'pointer',
                }}
                dataSource={this.state.dataSource}
                pagination={this.state.pagination}
                onRowDoubleClick={this.tableRowClick}
              />
            </Spin>
          </div>
        </div>
        {
          this.state.visible != "" &&
          <Modal
            title={!!data.id ? "编辑标准" : "新增标准"}
            visible={this.state.visible != ""}
            width="600px"
            onCancel={this.handleCancel}
            maskClosable={false}
            footer=""
            className="admin-desc-content"
          >
            <Form
              layout="horizontal"
              // onSubmit={this.handleSubmit}
              id="demand-form"
            >
              <Spin spinning={this.state.loading}>
                <div className="clearfix">
                  <FormItem
                    className="half-middle"
                    {...formItemLayout}
                    label="标准编号"
                  >
                    <Input
                      placeholder="标准编号"
                      value={data["serialNumber"]
                        ? data["serialNumber"]
                        : ""}
                      style={{ width: "230px" }}
                      onChange={(e) => {
                        data["serialNumber"] = e.target.value;
                        this.setState({
                          data: data
                        });
                      }}
                    />
                    <span className="mandatory">*</span>
                  </FormItem>

                  <FormItem
                    className="half-middle"
                    {...formItemLayout}
                    label="标准名称"
                  >
                    <Input
                      placeholder="标准名称"
                      value={data["name"]
                        ? data["name"]
                        : ""}
                      style={{ width: "230px" }}
                      onChange={(e) => {
                        data["name"] = e.target.value;
                        this.setState({
                          data: data
                        });
                      }}
                    />
                    <span className="mandatory">*</span>
                  </FormItem>

                  <FormItem
                    className="half-middle"
                    {...formItemLayout}
                    label="参考"
                  >
                    <Select
                      placeholder="请选择"
                      style={{ width: "80px" }}
                      value={data.type}
                      onChange={(e) => {
                        data["type"] = e;
                        this.setState({
                          data: data
                        });
                      }}
                    >
                      {this.state.typeList.map(function (item) {
                        return (
                          <Select.Option key={item.value} value={item.value}>
                            {item.key}
                          </Select.Option>
                        );
                      })}
                    </Select>
                    <Input
                      placeholder="请输入参考网址"
                      value={data["reference"]
                        ? data["reference"]
                        : ""}
                      style={{ width: "140px", marginLeft: "10px" }}
                      onChange={(e) => {
                        data["reference"] = e.target.value;
                        this.setState({
                          data: data
                        });
                      }}
                    />
                  </FormItem>

                  <FormItem
                    className="half-middle"
                    {...formItemLayout}
                    label="部门"
                  >
                    <Select
                      placeholder="请选择部门"
                      style={{ width: 230 }}
                      value={data["depId"]
                        ? data["depId"]
                        : undefined}
                      onChange={e => {
                        data["depId"] = e;
                        this.setState({
                          data: data,
                        });
                      }}
                    >
                      {departmentArr.map(function (item) {
                        return (
                          <Select.Option key={item.id}>{item.name}</Select.Option>
                        );
                      })}
                    </Select>
                    <span className="mandatory">*</span>
                  </FormItem>

                  <FormItem
                    className="half-middle"
                    {...formItemLayout}
                    label="负责人"
                  >
                    <AutoComplete
                      className="certain-category-search"
                      dropdownClassName="certain-category-search-dropdown"
                      dropdownMatchSelectWidth={false}
                      style={{ width: 230 }}
                      dataSource={options}
                      placeholder="负责人名称"
                      value={this.state.adminName}
                      onChange={this.followUp.bind(this)}
                      filterOption={true}
                      onSelect={this.selectF.bind(this)}
                    >
                      <Input />
                    </AutoComplete>
                  </FormItem>

                  <FormItem
                    className="half-middle"
                    {...formItemLayout}
                    label="状态"
                  >
                    <Select
                      placeholder=""
                      style={{ width: "80px" }}
                      value={data.status}
                      onChange={(e) => {
                        data["status"] = e;
                        this.setState({
                          data: data,
                        });
                      }}
                    >
                      {[
                        { key: "关闭", value: 0 },
                        { key: "开启", value: 1 },
                      ].map(function (item) {
                        return (
                          <Select.Option key={item.value} value={item.value}>
                            {item.key}
                          </Select.Option>
                        );
                      })}
                    </Select>
                    <span className="mandatory">*</span>
                  </FormItem>

                  <FormItem
                    className="half-middle"
                    {...formItemLayout}
                    label="上附件"
                  >
                    <PicturesWall
                      domId={'standard'}
                      fileList={this.getOrgCodeUrl}
                      pictureUrl={this.state.orgCodeUrl}
                    />
                  </FormItem>
                  <span className="mandatory" style={{ marginLeft: 210 }}>支持图片，pdf</span>

                </div>
                <FormItem className="half-middle">
                  <Button
                    className="set-submit"
                    type="primary"
                    onClick={this.handleSubmit}
                    style={{ marginLeft: "150px" }}
                  >
                    保存
                  </Button>
                  <Button
                    className="set-submit"
                    type="ghost"
                    onClick={this.handleCancel}
                  >
                    取消
                  </Button>
                </FormItem>
              </Spin>
            </Form>
          </Modal>
        }
      </div>
    );
  }
}));

export default Standard;