kede-HN-officialWeb-client/js/component/administration/business/proservlist.jsx

import React from "react";
import $ from "jquery/src/ajax";
import "react-quill/dist/quill.bubble.css";
import moment from "moment";
import {
  Form,
  Icon,
  Button,
  Input,
  Select,
  Spin,
  Table,
  message,
  DatePicker,
  Modal,
  Upload,
  Popconfirm,
  Cascader,
  InputNumber,
  Radio,
  TimePicker,
  Tabs,
  Tag
} from "antd";
import { areaSelect, getProvince } from "@/NewDicProvinceList"; //省市区
import {
  getGameState,
  splitUrl,
  getprovince,
  getStatuslist,
  getLvl,
  beforeUploadFile,
  getSecretType,
  getBuyAuditType,
  getPicPath
} from "@/tools.js";

import Img01 from "./image/cgg.jpg";
import Img02 from "./image/ttt.jpg";
import Img03 from "./image/xxxd.jpg";
import Img04 from "./image/bbb.jpg";

//上传图片组件
const PicturesWall = React.createClass({
  getInitialState() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: this.props.pictureUrl,
      imgflag: this.props.flagimg
    };
  },
  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 { previewVisible, previewImage, fileList, flagimg } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">点击上传</div>
      </div>
    );
    return (
      <div style={{ display: "inline-block" }} className={flagimg}>
        <Upload
          beforeUpload={beforeUploadFile}
          action={globalConfig.context + "/api/admin/organization/uploadFile"}
          data={{ sign: "purchase_picture" }}
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList && fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal
          maskClosable={false}
          visible={previewVisible}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="" style={{ width: "100%" }} src={previewImage} />
        </Modal>
      </div>
    );
  }
});
//主体
const Proservlist = Form.create()(
  React.createClass({
    loadData(pageNo) {
      this.state.data = [];
      this.setState({
        loading: true,
        page: pageNo
      });
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/organization/listOrganization",
        data: {
          pageNo: pageNo || this.state.pagination.current || 1,
          pageSize: this.state.pagination.pageSize,
          name: this.state.nameSearch
        },
        success: function(data) {
          let theArr = [];
          if (!data.data || !data.data.list) {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            }
          } else {
            for (let i = 0; i < data.data.list.length; i++) {
              let thisdata = data.data.list[i];
              theArr.push({
                key: i + 1,
                id: thisdata.id,
                name: thisdata.name,
                pictureUrl: thisdata.pictureUrl,
                releaseStatus: thisdata.releaseStatus,
                status: thisdata.status,
                sort: thisdata.sort,
                releaseTimeConvert: thisdata.releaseTimeConvert
              });
            }
            this.state.pagination.current = data.data.pageNo;
            this.state.pagination.total = data.data.totalCount;
          }
          this.setState({
            dataSource: theArr,
            pagination: this.state.pagination
          });
        }.bind(this)
      }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    },
    getInitialState() {
      return {
        loading: false,
        flag: true,
        timesArr: [],
        totalData: {
          mark: false
        },
        purchaseImg: [],
        pagination: {
          defaultCurrent: 1,
          defaultPageSize: 10,
          showQuickJumper: true,
          pageSize: 10,
          onChange: function(page) {
            this.loadData(page);
            this.setState({
              selectedRowKeys: []
            });
          }.bind(this),
          showTotal: function(total) {
            return "共" + total + "条数据";
          }
        },
        //数据类型
        columns: [
          {
            title: "序号",
            dataIndex: "key",
            key: "key"
          },
          {
            title: "是否发布",
            dataIndex: "releaseStatus",
            key: "releaseStatus",
            render: s => {
              return s ? (
                <Tag color="#87d068">已发布</Tag>
              ) : (
                <Tag color="#f50">未发布</Tag>
              );
            }
          },
          {
            title: "是否首页",
            dataIndex: "status",
            key: "status",
            render: s => {
              return s ? (
                <Tag color="#87d068">是</Tag>
              ) : (
                <Tag color="#f50">否</Tag>
              );
            }
          },
          {
            title: "战略合作机构",
            dataIndex: "name",
            key: "name"
          },
          {
            title: "LOGO缩率图",
            dataIndex: "pictureUrl",
            key: "pictureUrl",
            render: url => {
              let path = getPicPath(globalConfig.avatarUploadHost, url);
              return (
                <div style={{ textAlign: "center" }}>
                  <img src={path} style={{ width: "100px", height: 50 }} />
                  <Button
                    className="buttonimg"
                    style={{ marginLeft: 10 }}
                    onClick={e => {
                      e.stopPropagation();
                      this.maximg(path);
                    }}
                  >
                    查看大图
                  </Button>
                </div>
              );
            }
          },
          {
            title: "排序",
            dataIndex: "sort",
            key: "sort"
          },
          {
            title: "操作",
            dataIndex: "ads",
            key: "ads",
            render: (text, record, index) => {
              return (
                <div>
                  {
                    <Button
                      type="primary"
                      onClick={event => {
                        this.stopPropagation(event);
                        this.edit(record);
                      }}
                    >
                      编辑
                    </Button>
                  }
                  {
                    <Popconfirm
                      okText="确定"
                      cancelText="取消"
                      title="您确定删除？删除后，合作信息将不再显示"
                      onConfirm={() => {
                        this.delete(record.id);
                      }}
                    >
                      <Button
                        type="danger"
                        style={{ marginLeft: "10px" }}
                        onClick={event => {
                          this.stopPropagation(event);
                        }}
                      >
                        删除
                      </Button>
                    </Popconfirm>
                  }
                  {
                    <Button
                      type="primary"
                      style={{ marginLeft: "10px" }}
                      onClick={e => {
                        e.stopPropagation();
                        if (record.status) {
                          this.toTop(record, 0);
                        } else {
                          this.toTop(record, 1);
                        }
                      }}
                    >
                      {record.status ? "从首页撤下" : "推荐至首页"}
                    </Button>
                  }
                  <Button
                    type="primary"
                    style={{ marginLeft: "10px" }}
                    onClick={event => {
                      this.stopPropagation(event);
                      if (record.releaseStatus) {
                        this.remove(record, 0);
                      } else {
                        this.remove(record, 1);
                      }
                    }}
                  >
                    {record.releaseStatus ? "撤销发布" : "发布"}
                  </Button>
                </div>
              );
            }
          }
        ],
        //数据列表
        dataSource: []
      };
    },

    componentWillMount() {
      this.loadData();
    },
    stopPropagation(e) {
      e.stopPropagation();
      e.nativeEvent.stopImmediatePropagation();
    },
    //点击大图
    maximg(url) {
      this.setState({
        imgeditvisible: true,
        maximg: url
      });
    },
    imghandleCancel() {
      this.setState({
        imgeditvisible: false
      });
    },
    //删除按钮
    delete(id) {
      $.ajax({
        method: "post",
        dataType: "json",
        crossDomain: false,
        url:
          globalConfig.context + "/api/admin/organization/deleteOrganization",
        data: {
          id
        },
        success: function(data) {
          let theArr = [];
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          } else {
            this.loadData();
          }
        }.bind(this)
      }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    },
    //项目列表整行点击
    tableRowClick(record, index) {
      this.state.RowData = record;
      this.setState({
        editvisible: true
      });
      this.edit(record);
    },

    edithandleCancel(e) {
      this.setState(
        {
          editvisible: false
        },
        () => {
          this.addReset();
        }
      );
      this.loadData();
    },

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

    add() {
      this.setState({
        editvisible: true,
        flag: false
      });
    },
    //撤下
    remove(record, flag) {
      $.ajax({
        method: "post",
        dataType: "json",
        crossDomain: false,
        url:
          globalConfig.context + "/api/admin/organization/updateOrganization",
        data: {
          id: record.id,
          releaseStatus: flag
        },
        success: function(data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          } else {
            this.loadData();
          }
        }.bind(this)
      }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    },
    addNew(flag) {
      if (this.state.flag) {
        $.ajax({
          method: "post",
          dataType: "json",
          crossDomain: false,
          url:
            globalConfig.context + "/api/admin/organization/updateOrganization",
          data: {
            id: this.state.id,
            name: this.state.name,
            releaseStatus: flag,
            sort: this.state.sort,
            pictureUrl: this.state.pictureUrl
              ? this.state.pictureUrl[0].response.data
              : undefined
          },
          success: function(data) {
            if (data.error.length || data.data.list == "") {
              if (data.error && data.error.length) {
                message.warning(data.error[0].message);
              }
            } else {
              this.edithandleCancel();
            }
          }.bind(this)
        }).always(
          function() {
            this.setState({
              loading: false
            });
          }.bind(this)
        );
      } else {
        $.ajax({
          method: "post",
          dataType: "json",
          crossDomain: false,
          url: globalConfig.context + "/api/admin/organization/addOrganization",
          data: {
            name: this.state.name,
            releaseStatus: flag,
            sort: this.state.sort,
            pictureUrl: this.state.pictureUrl
              ? this.state.pictureUrl[0].response.data
              : undefined
          },
          success: function(data) {
            if (data.error.length || data.data.list == "") {
              if (data.error && data.error.length) {
                message.warning(data.error[0].message);
              }
            } else {
              this.cancelAdd();
            }
          }.bind(this)
        }).always(
          function() {
            this.setState({
              loading: false
            });
          }.bind(this)
        );
      }
    },

    saveNew() {
      this.change("releaseStatus", 0, () => {
        this.addNew();
      });
    },

    issueNew() {
      this.change("releaseStatus", 1, () => {
        this.addNew();
      });
    },
    //编辑按钮操作
    edit(record, index) {
      this.setState({
        editvisible: true,
        loading: true
      });
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url:
          globalConfig.context + "/api/admin/organization/selectOrganization",
        data: {
          id: record.id
        },
        success: function(data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          } else {
            const thisdata = data.data;
            this.setState({
              id: thisdata.id,
              name: thisdata.name,
              pictureUrl: thisdata.pictureUrl
                ? splitUrl(
                    thisdata.pictureUrl,
                    ",",
                    globalConfig.avatarUploadHost
                  )
                : [],
              releaseStatus: thisdata.releaseStatus,
              sort: thisdata.sort,
              releaseTimeConvert: thisdata.releaseTimeConvert,
              createTimeConvert: thisdata.createTimeConvert
            });
          }
        }.bind(this)
      }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    },
    cancelAdd() {
      this.setState(
        {
          editvisible: false
        },
        () => {
          this.setState({
            flag: true
          });
          this.addReset();
        }
      );
      this.loadData();
    },

    //新增框的清零
    addReset() {
      this.setState({
        totalData: {},
        purchaseImg: []
      });
    },
    //搜索部分的清零
    reset() {
      this.state.nameSearch = undefined;
      this.loadData();
    },
    getOrgCodeUrl(e) {
      this.setState({ pictureUrl: e });
    },
    toTop(record, num) {
      this.setState({
        loading: true
      });
      $.ajax({
        method: "post",
        dataType: "json",
        crossDomain: false,
        url:
          globalConfig.context + "/api/admin/organization/updateOrganization",
        data: {
          id: record.id,
          status: num
        },
        success: function(data) {
          let theArr = [];
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          } else {
            this.loadData();
          }
        }.bind(this)
      }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    },

    render() {
      const FormItem = Form.Item;
      const rowSelection = {
        selectedRowKeys: this.state.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.setState({
            selectedRows: selectedRows.slice(-1),
            selectedRowKeys: selectedRowKeys.slice(-1)
          });
        }
      };
      let data = this.state.totalData;
      const { TextArea } = Input; //文本域
      const { TabPane } = Tabs; //标签页
      const { MonthPicker, RangePicker, WeekPicker } = DatePicker; //日期输入框
      return (
        <div className="user-content">
          <div className="content-title">
            <span>战略合作列表</span>
            <div className="user-search">
              <Input
                placeholder="请输入公司关键字"
                style={{
                  width: "150px",
                  marginRight: "10px",
                  marginBottom: "10px"
                }}
                value={this.state.nameSearch}
                onChange={e => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <Button
                type="primary"
                onClick={this.search}
                style={{ marginRight: "10px" }}
              >
                搜索
              </Button>
              <Button onClick={this.reset} style={{ marginRight: "10px" }}>
                重置
              </Button>
              <Button
                type="primary"
                onClick={this.add}
                style={{ marginLeft: "100px" }}
              >
                新增案例
              </Button>
            </div>
            <div className="patent-table">
              <Spin spinning={this.state.loading}>
                <Table
                  columns={this.state.columns}
                  dataSource={this.state.dataSource}
                  pagination={this.state.pagination}
                  onRowClick={this.tableRowClick}
                  size="small"
                  bordered
                />
              </Spin>
            </div>
          </div>
          <div className="patent-desc">
            <Modal
              className="customeDetails"
              title={this.state.flag ? "案例详情" : "新增案例信息"}
              width="350"
              visible={this.state.editvisible}
              onOk={this.edithandleCancel}
              onCancel={
                this.state.flag ? this.edithandleCancel : this.cancelAdd
              }
              footer=""
            >
              <Form
                layout="horizontal"
                onSubmit={this.edithandleSubmit}
                id="demand-form"
              >
                <Spin spinning={this.state.loading}>
                  <div className="clearfix">
                    <FormItem
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 8 }}
                      label="名称"
                    >
                      <Input
                        placeholder="请输入名称"
                        value={this.state.name}
                        onChange={e => {
                          this.setState({
                            name: e.target.value
                          });
                        }}
                        style={{ width: "240px" }}
                      />
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 8 }}
                      label="LOGO"
                    >
                      <PicturesWall
                        flagimg={this.state.flag}
                        fileList={this.getOrgCodeUrl}
                        pictureUrl={this.state.pictureUrl}
                      />
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 8 }}
                      label="排序"
                    >
                      <Input
                        placeholder="请输入数字"
                        value={this.state.sort}
                        onChange={e => {
                          this.setState({
                            sort: e.target.value
                          });
                        }}
                        style={{ width: "240px" }}
                      />
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <Button
                      type="primary"
                      size="large"
                      onClick={e => {
                        this.addNew(0);
                      }}
                      style={{
                        float: "right",
                        marginRight: "80px",
                        marginTop: "20px"
                      }}
                    >
                      保存
                    </Button>
                    <Button
                      type="primary"
                      size="large"
                      onClick={e => {
                        this.addNew(1);
                      }}
                      style={{
                        float: "right",
                        marginRight: "20px",
                        marginTop: "20px"
                      }}
                    >
                      保存并发布
                    </Button>
                  </div>
                </Spin>
              </Form>
            </Modal>
            <Modal
              visible={this.state.imgeditvisible}
              onCancel={this.imghandleCancel}
              onOk={this.imgOk}
            >
              <img style={{ width: "100%" }} src={this.state.maximg} />
            </Modal>
          </div>
        </div>
      );
    }
  })
);

export default Form.create()(Proservlist);