kede-officialWeb-currency-client/js/component/administration/business/talentsList.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,
  Table,
  message,
  DatePicker,
  Modal,
  Upload,
  Popconfirm,
  Cascader,
  InputNumber,
  Radio,
  TimePicker,
  Tabs,
  Tag, Tooltip, Checkbox
} from "antd";
import { areaSelect, getProvince } from "@/NewDicProvinceList"; //省市区
import {
  getGameState,
  splitUrl,
  getprovince,
  getStatuslist,
  getLvl,
  placeList,
  province,
  provinceStatus,
  beforeUploadFile,
  getPicPath
} from "@/tools.js";
const { Option } = Select;
import Editors from "@/richTextEditors"; //富文本编辑器

import ad01 from "./image/ad01.jpg";
import ad02 from "./image/ad02.jpg";
import ad03 from "./image/ad03.jpg";
import ad04 from "./image/ad04.jpg";
import SpinContainer from "../../SpinContainer";
import {companyList, getCompanyName, getCompanyValueArray} from "../../common/configure";

const PicturesWall = React.createClass({
  getInitialState() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: []
    };
  },
  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 } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">点击上传</div>
      </div>
    );
    return (
      <div style={{ display: "inline-block" }}>
        <Upload
          beforeUpload={beforeUploadFile}
          // action={globalConfig.context + "/api/admin/purchase/uploadPicture"}
          // url: '//172.16.0.253:8080' + '/api/admin/banners/addBanners',
          action={globalConfig.context + "/api/admin/recruitment/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 TalentsList = Form.create()(
  React.createClass({
    loadData(pageNo) {
      this.state.data = [];
      this.setState({
        loading: true,
        page: pageNo
      });
      $.ajax({
        method: "get",
        dataType: "json",
        url: globalConfig.context + "/api/admin/recruitment/listRecruitment",
        data: {
          pageNo: pageNo || this.state.pagination.current || 1,
          pageSize: this.state.pagination.pageSize,
          name: this.state.nameSearch,
          location: this.state.locationSearch,
        },
        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];
              thisdata.key = i+1;
              theArr.push(thisdata);
            }
            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,
        imgeditvisible: false,
        checked:false,
        indeterminate: false,
        activeKey: "1",
        purchaseImg: [],
        locations: [],
        maximg: "",
        timesArr: [],
        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: "name",
            key: "name"
          },
          {
            title: "招聘省份",
            dataIndex: "province",
            key: "province",
            render: e => {
              let str = "";
              provinceStatus.forEach(item => {
                if (item.value == e) {
                  str = item.key;
                }
              });
              return str;
            }
          },
          {
            title: "排序",
            dataIndex: "sort",
            key: "sort"
          },
          {
            title: "是否发布",
            dataIndex: "releaseStatus",
            key: "releaseStatus",
            render: s => {
              return s ? (
                <Tag color="#87d068">已发布</Tag>
              ) : (
                <Tag color="#f50">未发布</Tag>
              );
            }
          },
          {
            title: "公司",
            dataIndex: "locations",
            key: "locations",
            width:150,
            render: r => {
              let text = '';
              r && r.map((v,i)=>(
                  text += (i === 0 ? '':',')+getCompanyName(v)
              ))
              return(
                  <Tooltip placement="top" title={text}>
                    {
                      r && r.map((v,i)=>(
                          i <= 2 ? (i === 0 ? '':',')+getCompanyName(v) : null
                      ))
                    }
                    {
                      r.length > 3 ? '.....' : null
                    }
                  </Tooltip>
              )
            }
          },
          {
            title: "操作",
            dataIndex: "c",
            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={event => {
                      this.stopPropagation(event);
                      if (record.releaseStatus) {
                        this.remove(record, 0);
                      } else {
                        this.remove(record, 1);
                      }
                    }}
                  >
                    {record.releaseStatus ? "撤销发布" : "发布"}
                  </Button>
                </div>
              );
            }
          },
          {
            title: "发布时间",
            dataIndex: "releaseTimeConvert",
            key: "releaseTimeConvert"
          }
        ],
        //数据列表
        dataSource: []
      };
    },

    componentWillMount() {
      this.loadData();
    },
    detailes(record) {
      this.setState({
        loading: true
      });
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/banners/selectBanners",
        data: {
          id: record.id
        },
        success: function(data) {
          let thisdata = data.data;
          this.setState({
            id: thisdata.id,
            title: thisdata.title,
            bannerUrl: thisdata.bannerUrl
              ? splitUrl(thisdata.bannerUrl, ",", globalConfig.avatarUploadHost)
              : [],
            sortNumber: thisdata.sort,
            display: thisdata.display,
            position: thisdata.position
          });
        }.bind(this)
      }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    },
    //点击大图
    maximg(url) {
      this.setState({
        imgeditvisible: true,
        maximg: url
      });
    },
    //删除按钮
    delete(id) {
      $.ajax({
        method: "post",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/recruitment/deleteRecruitment",
        data: {
          id
        },
        success: function(data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          } else {
            message.success('删除成功')
            this.loadData();
          }
        }.bind(this)
      }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
      );
    },
    //阻止默认冒泡
    stopPropagation(e) {
      e.stopPropagation();
      e.nativeEvent.stopImmediatePropagation();
    },
    imghandleCancel() {
      this.setState({
        imgeditvisible: false
      });
    },
    //项目列表整行点击
    tableRowClick(record, index) {
      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
      });
      this.addReset();
    },
    cancelAdd() {
      this.setState(
        {
          editvisible: false
        },
        () => {
          this.setState({
            flag: true
          });
          this.addReset();
        }
      );
      this.loadData();
    },
    //撤下
    remove(record,flag) {
       $.ajax({
         method: "post",
         dataType: "json",
         crossDomain: false,
         url: globalConfig.context + "/api/admin/recruitment/updateRecruitment",
         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)
       );
    },
    //编辑按钮操作
    edit(record) {
      this.setState({
        flag: true,
        editvisible: true
      });
      this.setState({
        loading: true
      });
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/recruitment/selectRecruitment",
        data: {
          id: record.id
        },
        success: function(data) {
          let thisdata = data.data;
          let str = "";
          placeList.forEach(item => {
            if (item.value == thisdata.region) {
              str = item.place;
            }
          });
          this.setState({
            id: thisdata.id,
            name: thisdata.name,
            releaseStatus: thisdata.releaseStatus,
            province: thisdata.province + "",
            region: thisdata.region,
            regionStr: str,
            editorcontext: thisdata.content,
            sort: thisdata.sort,
            locations: thisdata.locations,
            checked:thisdata.locations.length === companyList.length,
            indeterminate: thisdata.locations.length < companyList.length,
            time: thisdata.releaseTimeConvert,
            createTimeConvert: thisdata.createTimeConvert
          });
        }.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/recruitment/updateRecruitment",
          data: {
            id: this.state.id,
            name: this.state.name,
            province: this.state.province,
            sort: this.state.sort,
            locations: this.state.locations.join(','),
            content: this.state.editorcontext,
            region: this.state.region,
            releaseStatus: flag,
            releaseTimes: this.state.time
          },
          success: function(data) {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            } else {
              message.success('保存成功');
              this.cancelAdd();
            }
          }.bind(this)
        }).always(
          function() {
            this.setState({
              loading: false
            });
          }.bind(this)
        );
      } else {
        $.ajax({
          method: "post",
          dataType: "json",
          crossDomain: false,
          url: globalConfig.context + "/api/admin/recruitment/addRecruitment",
          data: {
            name: this.state.name,
            province: this.state.province,
            sort: this.state.sort,
            locations: this.state.locations.join(','),
            content: this.state.editorcontext,
            region: this.state.region,
            releaseStatus: flag,
            releaseTimes: this.state.time
          },
          success: function(data) {
            let theArr = [];
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            } else {
              message.success('保存成功');
              this.cancelAdd();
            }
          }.bind(this)
        }).always(
          function() {
            this.setState({
              loading: false
            });
          }.bind(this)
        );
      }
    },

    //新增框的清零
    addReset() {
      this.setState({
        name: undefined,
        sort: undefined,
        locations: [],
        display: 1,
        province: [],
        editorcontext: "",
        region: undefined,
        time: undefined,
        indeterminate: false,
        checked:false,
      });
    },
    //搜索部分的清零
    reset() {
      this.setState({
        nameSearch: undefined,
        locationSearch: undefined,
      },()=>{
        this.loadData();
      })
    },
    imgOk() {
      this.setState({
        imgeditvisible: false
      });
    },
    getOrgCodeUrl(e) {
      this.setState({ bannerUrl: e });
    },

    render() {
      const FormItem = Form.Item;
      const rowSelection = {
        selectedRowKeys: this.state.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.setState({
            selectedRows: selectedRows.slice(-1),
            selectedRowKeys: selectedRowKeys.slice(-1)
          });
        }
      };
      const { TextArea } = Input; //文本域
      const { TabPane } = Tabs; //标签页
      const { MonthPicker, RangePicker, WeekPicker } = DatePicker; //日期输入框
      const dateFormat = "YYYY/MM/DD"; //日期格式
      const theData = this.state.data || {};
      return (
        <div className="user-content">
          <div className="content-title">
            <span>招聘列表</span>
            <div className="user-search">
              <Input
                placeholder="请输入职位名称"
                value={this.state.nameSearch}
                onChange={e => {
                  this.setState({ nameSearch: e.target.value });
                }}
                style={{
                  width: "150px",
                  marginRight: "10px",
                  marginBottom: "10px"
                }}
              />
              <Select
                  placeholder="请选择公司"
                  style={{ width: 150 }}
                  value={this.state.locationSearch}
                  onChange={e => {
                    this.setState({
                      locationSearch: e
                    });
                  }}
              >
                {
                  companyList.map((v)=>(
                      <Select.Option key={v.value} value={v.value}>{v.label}</Select.Option>
                  ))
                }
              </Select>
              <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">
              <SpinContainer spinning={this.state.loading}>
                <Table
                  columns={this.state.columns}
                  dataSource={this.state.dataSource}
                  onRowClick={this.tableRowClick}
                  pagination={this.state.pagination}
                  bordered
                  size="small"
                />
              </SpinContainer>
            </div>
          </div>
          <div className="patent-desc">
            <Modal
              className="customeDetails"
              title={this.state.flag ? "职位详情" : "新增职位"}
              visible={this.state.editvisible}
              onOk={this.edithandleCancel}
              width={"1000px"}
              onCancel={
                this.state.flag ? this.edithandleCancel : this.cancelAdd
              }
              footer=""
            >
              <Form
                layout="horizontal"
                onSubmit={this.edithandleSubmit}
                id="demand-form"
              >
                <SpinContainer spinning={this.state.loading}>
                  <div className="clearfix">
                    <FormItem
                      className="half-item"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 12 }}
                      label="职位名称"
                    >
                      <Input
                        placeholder="请输入职位名称"
                        value={this.state.name}
                        onChange={e => {
                          this.setState({ name: e.target.value });
                        }}
                        style={{ width: "240px" }}
                      />
                    </FormItem>
                    <div className="clearfix">
                      <FormItem
                        className="half-item"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        label="发布时间"
                      >
                        <DatePicker
                          placeholder="请输入发布时间"
                          format="YYYY-MM-DD HH:mm:ss"
                          showTime
                          value={
                            this.state.time ? moment(this.state.time) : null
                          }
                          onChange={(e, f) => {
                            this.setState({ time: f });
                          }}
                          style={{ width: "240px" }}
                        />
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem
                        className="half-item"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        label="招聘省份"
                      >
                        <Select
                          style={{ width: 120 }}
                          placeholder="请选择省份"
                          value={this.state.province}
                          onChange={e => {
                            this.setState({
                              province: e
                            });
                            let str = "";
                            provinceStatus.forEach(item => {
                              if (item.value == e) {
                                str = item.key;
                              }
                            });
                            placeList.forEach(item => {
                              item.children.forEach(key => {
                                if (key == str) {
                                  this.setState({
                                    regionStr: item.place,
                                    region: item.value
                                  });
                                }
                              });
                            });
                          }}
                        >
                          {provinceStatus.map(item => {
                            return (
                              <Option value={item.value}>{item.key}</Option>
                            );
                          })}
                        </Select>
                      </FormItem>
                    </div>

                    <FormItem
                      className="half-item"
                      labelCol={{ span: 8 }}
                      wrapperCol={{ span: 12 }}
                      label="排序"
                    >
                      <Input
                        placeholder="请输入数字"
                        value={this.state.sort}
                        onChange={e => {
                          this.setState({
                            sort: e.target.value
                          });
                        }}
                        style={{ width: "140px" }}
                      />
                    </FormItem>
                    <FormItem
                        className="half-item"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 12 }}
                        label="公司"
                    >
                      <Checkbox indeterminate={this.state.indeterminate} checked={this.state.checked} onChange={(e)=>{
                        this.setState({
                          locations: e.target.checked ? getCompanyValueArray():[],
                          indeterminate: false,
                          checked:e.target.checked
                        })
                      }}>全选</Checkbox>
                      <Checkbox.Group
                          options={companyList}
                          value={this.state.locations}
                          onChange={(e) => {
                            this.setState({
                              locations: e,
                              indeterminate: companyList.length > e.length,
                              checked: companyList.length === e.length
                            });
                          }}
                      />
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      labelCol={{ span: 4 }}
                      wrapperCol={{ span: 18 }}
                      label="招聘内容"
                    >
                      <Editors
                        textContent={this.state.editorcontext}
                        uploadUrl={"/api/admin/recruitment/uploadFile"}
                        globalConfig={globalConfig.uploadPath}
                        placeholder="业务项目客户基本条件"
                        handleRichText={value => {
                          //   this.setState({ editorcontext: value });
                          this.setState({
                            editorcontext: value
                          });
                        }}
                      />
                    </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>
                </SpinContainer>
              </Form>
            </Modal>
          </div>
          <Modal
            visible={this.state.imgeditvisible}
            onCancel={this.imghandleCancel}
            onOk={this.imgOk}
          >
            <img style={{ width: "100%" }} src={this.state.maximg} />
          </Modal>
        </div>
      );
    }
  })
);

export default TalentsList;