talentsList.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import "react-quill/dist/quill.bubble.css";
  4. import moment from "moment";
  5. import {
  6. Form,
  7. Icon,
  8. Button,
  9. Input,
  10. Select,
  11. Table,
  12. message,
  13. DatePicker,
  14. Modal,
  15. Upload,
  16. Popconfirm,
  17. Cascader,
  18. InputNumber,
  19. Radio,
  20. TimePicker,
  21. Tabs,
  22. Tag
  23. } from "antd";
  24. import { areaSelect, getProvince } from "@/NewDicProvinceList"; //省市区
  25. import {
  26. getGameState,
  27. splitUrl,
  28. getprovince,
  29. getStatuslist,
  30. getLvl,
  31. placeList,
  32. province,
  33. provinceStatus,
  34. beforeUploadFile,
  35. getPicPath
  36. } from "@/tools.js";
  37. const { Option } = Select;
  38. import Editors from "@/richTextEditors"; //富文本编辑器
  39. import ad01 from "./image/ad01.jpg";
  40. import ad02 from "./image/ad02.jpg";
  41. import ad03 from "./image/ad03.jpg";
  42. import ad04 from "./image/ad04.jpg";
  43. import SpinContainer from "../../SpinContainer";
  44. const PicturesWall = React.createClass({
  45. getInitialState() {
  46. return {
  47. previewVisible: false,
  48. previewImage: "",
  49. fileList: []
  50. };
  51. },
  52. getDefaultProps() {
  53. return {
  54. changeClick: this.modifyChange
  55. };
  56. },
  57. handleCancel() {
  58. this.setState({ previewVisible: false });
  59. },
  60. handlePreview(file) {
  61. this.setState({
  62. previewImage: file.url || file.thumbUrl,
  63. previewVisible: true
  64. });
  65. },
  66. handleChange(info) {
  67. let fileList = info.fileList;
  68. this.setState({ fileList });
  69. this.props.fileList(fileList);
  70. },
  71. componentWillReceiveProps(nextProps) {
  72. this.state.fileList = nextProps.pictureUrl;
  73. },
  74. render() {
  75. const { previewVisible, previewImage, fileList } = this.state;
  76. const uploadButton = (
  77. <div>
  78. <Icon type="plus" />
  79. <div className="ant-upload-text">点击上传</div>
  80. </div>
  81. );
  82. return (
  83. <div style={{ display: "inline-block" }}>
  84. <Upload
  85. beforeUpload={beforeUploadFile}
  86. // action={globalConfig.context + "/api/admin/purchase/uploadPicture"}
  87. // url: '//172.16.0.253:8080' + '/api/admin/banners/addBanners',
  88. action={globalConfig.context + "/api/admin/recruitment/uploadFile"}
  89. data={{ sign: "purchase_picture" }}
  90. listType="picture-card"
  91. fileList={fileList}
  92. onPreview={this.handlePreview}
  93. onChange={this.handleChange}
  94. >
  95. {fileList && fileList.length >= 1 ? null : uploadButton}
  96. </Upload>
  97. <Modal
  98. maskClosable={false}
  99. visible={previewVisible}
  100. footer={null}
  101. onCancel={this.handleCancel}
  102. >
  103. <img alt="" style={{ width: "100%" }} src={previewImage} />
  104. </Modal>
  105. </div>
  106. );
  107. }
  108. });
  109. //主体
  110. const TalentsList = Form.create()(
  111. React.createClass({
  112. loadData(pageNo) {
  113. this.state.data = [];
  114. this.setState({
  115. loading: true,
  116. page: pageNo
  117. });
  118. $.ajax({
  119. method: "get",
  120. dataType: "json",
  121. url: globalConfig.context + "/api/admin/recruitment/listRecruitment",
  122. data: {
  123. pageNo: pageNo || this.state.pagination.current || 1,
  124. pageSize: this.state.pagination.pageSize,
  125. name: this.state.nameSearch
  126. },
  127. success: function (data) {
  128. let theArr = [];
  129. if (!data.data || !data.data.list) {
  130. if (data.error && data.error.length) {
  131. message.warning(data.error[0].message);
  132. }
  133. } else {
  134. for (let i = 0; i < data.data.list.length; i++) {
  135. let thisdata = data.data.list[i];
  136. theArr.push({
  137. key: i + 1,
  138. id: thisdata.id,
  139. name: thisdata.name,
  140. releaseStatus: thisdata.releaseStatus,
  141. sort: thisdata.sort,
  142. province: thisdata.province,
  143. region: thisdata.region,
  144. content: thisdata.content,
  145. releaseTimeConvert: thisdata.releaseTimeConvert
  146. });
  147. }
  148. this.state.pagination.current = data.data.pageNo;
  149. this.state.pagination.total = data.data.totalCount;
  150. }
  151. this.setState({
  152. dataSource: theArr,
  153. pagination: this.state.pagination
  154. });
  155. }.bind(this)
  156. }).always(
  157. function () {
  158. this.setState({
  159. loading: false
  160. });
  161. }.bind(this)
  162. );
  163. },
  164. getInitialState() {
  165. return {
  166. loading: false,
  167. flag: true,
  168. imgeditvisible: false,
  169. activeKey: "1",
  170. purchaseImg: [],
  171. maximg: "",
  172. timesArr: [],
  173. pagination: {
  174. defaultCurrent: 1,
  175. defaultPageSize: 10,
  176. showQuickJumper: true,
  177. pageSize: 10,
  178. onChange: function (page) {
  179. this.loadData(page);
  180. this.setState({
  181. selectedRowKeys: []
  182. });
  183. }.bind(this),
  184. showTotal: function (total) {
  185. return "共" + total + "条数据";
  186. }
  187. },
  188. //数据类型
  189. columns: [
  190. {
  191. title: "序号",
  192. dataIndex: "key",
  193. key: "key"
  194. },
  195. {
  196. title: "职位名称",
  197. dataIndex: "name",
  198. key: "name"
  199. },
  200. {
  201. title: "招聘省份",
  202. dataIndex: "province",
  203. key: "province",
  204. render: e => {
  205. let str = "";
  206. provinceStatus.forEach(item => {
  207. if (item.value == e) {
  208. str = item.key;
  209. }
  210. });
  211. return str;
  212. }
  213. },
  214. {
  215. title: "排序",
  216. dataIndex: "sort",
  217. key: "sort"
  218. },
  219. {
  220. title: "是否发布",
  221. dataIndex: "releaseStatus",
  222. key: "releaseStatus",
  223. render: s => {
  224. return s ? (
  225. <Tag color="#87d068">已发布</Tag>
  226. ) : (
  227. <Tag color="#f50">未发布</Tag>
  228. );
  229. }
  230. },
  231. {
  232. title: "操作",
  233. dataIndex: "c",
  234. render: (text, record, index) => {
  235. return (
  236. <div>
  237. {
  238. <Button
  239. type="primary"
  240. onClick={event => {
  241. this.stopPropagation(event);
  242. this.edit(record);
  243. }}
  244. >
  245. 编辑
  246. </Button>
  247. }
  248. {
  249. <Popconfirm
  250. okText="确定"
  251. cancelText="取消"
  252. title="您确定删除?删除后,招聘信息将不再显示"
  253. onConfirm={() => {
  254. this.delete(record.id);
  255. }}
  256. >
  257. <Button
  258. type="danger"
  259. style={{ marginLeft: "10px" }}
  260. onClick={event => {
  261. this.stopPropagation(event);
  262. }}
  263. >
  264. 删除
  265. </Button>
  266. </Popconfirm>
  267. }
  268. <Button
  269. type="primary"
  270. style={{ marginLeft: "10px" }}
  271. onClick={event => {
  272. this.stopPropagation(event);
  273. if (record.releaseStatus) {
  274. this.remove(record, 0);
  275. } else {
  276. this.remove(record, 1);
  277. }
  278. }}
  279. >
  280. {record.releaseStatus ? "撤销发布" : "发布"}
  281. </Button>
  282. </div>
  283. );
  284. }
  285. },
  286. {
  287. title: "发布时间",
  288. dataIndex: "releaseTimeConvert",
  289. key: "releaseTimeConvert"
  290. }
  291. ],
  292. //数据列表
  293. dataSource: []
  294. };
  295. },
  296. componentWillMount() {
  297. this.loadData();
  298. },
  299. detailes(record) {
  300. this.setState({
  301. loading: true
  302. });
  303. $.ajax({
  304. method: "get",
  305. dataType: "json",
  306. crossDomain: false,
  307. url: globalConfig.context + "/api/admin/banners/selectBanners",
  308. data: {
  309. id: record.id
  310. },
  311. success: function (data) {
  312. let thisdata = data.data;
  313. this.setState({
  314. id: thisdata.id,
  315. title: thisdata.title,
  316. bannerUrl: thisdata.bannerUrl
  317. ? splitUrl(thisdata.bannerUrl, ",", globalConfig.avatarUploadHost)
  318. : [],
  319. sortNumber: thisdata.sort,
  320. display: thisdata.display,
  321. position: thisdata.position
  322. });
  323. }.bind(this)
  324. }).always(
  325. function () {
  326. this.setState({
  327. loading: false
  328. });
  329. }.bind(this)
  330. );
  331. },
  332. //点击大图
  333. maximg(url) {
  334. this.setState({
  335. imgeditvisible: true,
  336. maximg: url
  337. });
  338. },
  339. //删除按钮
  340. delete(id) {
  341. $.ajax({
  342. method: "post",
  343. dataType: "json",
  344. crossDomain: false,
  345. url: globalConfig.context + "/api/admin/recruitment/deleteRecruitment",
  346. data: {
  347. id
  348. },
  349. success: function (data) {
  350. this.loadData();
  351. }.bind(this)
  352. }).always(
  353. function () {
  354. this.setState({
  355. loading: false
  356. });
  357. }.bind(this)
  358. );
  359. },
  360. //阻止默认冒泡
  361. stopPropagation(e) {
  362. e.stopPropagation();
  363. e.nativeEvent.stopImmediatePropagation();
  364. },
  365. imghandleCancel() {
  366. this.setState({
  367. imgeditvisible: false
  368. });
  369. },
  370. //项目列表整行点击
  371. tableRowClick(record, index) {
  372. this.setState({
  373. editvisible: true
  374. });
  375. this.edit(record);
  376. },
  377. edithandleCancel(e) {
  378. this.setState(
  379. {
  380. editvisible: false
  381. },
  382. () => {
  383. this.addReset();
  384. }
  385. );
  386. this.loadData();
  387. },
  388. search() {
  389. this.loadData();
  390. },
  391. add() {
  392. this.setState({
  393. editvisible: true,
  394. flag: false
  395. });
  396. this.addReset();
  397. },
  398. cancelAdd() {
  399. this.setState(
  400. {
  401. editvisible: false
  402. },
  403. () => {
  404. this.setState({
  405. flag: true
  406. });
  407. this.addReset();
  408. }
  409. );
  410. this.loadData();
  411. },
  412. //撤下
  413. remove(record, flag) {
  414. $.ajax({
  415. method: "post",
  416. dataType: "json",
  417. crossDomain: false,
  418. url: globalConfig.context + "/api/admin/recruitment/updateRecruitment",
  419. data: {
  420. id: record.id,
  421. releaseStatus: flag
  422. },
  423. success: function (data) {
  424. if (data.error && data.error.length) {
  425. message.warning(data.error[0].message);
  426. } else {
  427. this.loadData();
  428. }
  429. }.bind(this)
  430. }).always(
  431. function () {
  432. this.setState({
  433. loading: false
  434. });
  435. }.bind(this)
  436. );
  437. },
  438. //编辑按钮操作
  439. edit(record) {
  440. this.setState({
  441. flag: true,
  442. editvisible: true
  443. });
  444. this.setState({
  445. loading: true
  446. });
  447. $.ajax({
  448. method: "get",
  449. dataType: "json",
  450. crossDomain: false,
  451. url: globalConfig.context + "/api/admin/recruitment/selectRecruitment",
  452. data: {
  453. id: record.id
  454. },
  455. success: function (data) {
  456. let thisdata = data.data;
  457. let str = "";
  458. placeList.forEach(item => {
  459. if (item.value == thisdata.region) {
  460. str = item.place;
  461. }
  462. });
  463. this.setState({
  464. id: thisdata.id,
  465. name: thisdata.name,
  466. releaseStatus: thisdata.releaseStatus,
  467. province: thisdata.province + "",
  468. region: thisdata.region,
  469. regionStr: str,
  470. editorcontext: thisdata.content,
  471. sort: thisdata.sort,
  472. time: thisdata.releaseTimeConvert,
  473. createTimeConvert: thisdata.createTimeConvert
  474. });
  475. }.bind(this)
  476. }).always(
  477. function () {
  478. this.setState({
  479. loading: false
  480. });
  481. }.bind(this)
  482. );
  483. },
  484. addNew(flag) {
  485. this.setState({
  486. loading: true
  487. });
  488. if (this.state.flag) {
  489. $.ajax({
  490. method: "post",
  491. dataType: "json",
  492. crossDomain: false,
  493. url:
  494. globalConfig.context + "/api/admin/recruitment/updateRecruitment",
  495. data: {
  496. id: this.state.id,
  497. name: this.state.name,
  498. province: this.state.province,
  499. sort: this.state.sort,
  500. content: this.state.editorcontext,
  501. region: this.state.region,
  502. releaseStatus: flag,
  503. releaseTimes: this.state.time
  504. },
  505. success: function (data) {
  506. this.setState({
  507. loading: false
  508. });
  509. let theArr = [];
  510. if (data.error && data.error.length) {
  511. message.warning(data.error[0].message);
  512. } else {
  513. this.cancelAdd();
  514. }
  515. }.bind(this)
  516. }).always(
  517. function () {
  518. this.setState({
  519. loading: false
  520. });
  521. }.bind(this)
  522. );
  523. } else {
  524. $.ajax({
  525. method: "post",
  526. dataType: "json",
  527. crossDomain: false,
  528. url: globalConfig.context + "/api/admin/recruitment/addRecruitment",
  529. data: {
  530. name: this.state.name,
  531. province: this.state.province,
  532. sort: this.state.sort,
  533. content: this.state.editorcontext,
  534. region: this.state.region,
  535. releaseStatus: flag,
  536. releaseTimes: this.state.time
  537. },
  538. success: function (data) {
  539. this.setState({
  540. loading: false
  541. });
  542. let theArr = [];
  543. if (data.error && data.error.length) {
  544. message.warning(data.error[0].message);
  545. } else {
  546. this.cancelAdd();
  547. }
  548. }.bind(this)
  549. }).always(
  550. function () {
  551. this.setState({
  552. loading: false
  553. });
  554. }.bind(this)
  555. );
  556. }
  557. },
  558. //新增框的清零
  559. addReset() {
  560. this.setState({
  561. name: undefined,
  562. sort: undefined,
  563. display: 1,
  564. province: [],
  565. editorcontext: "",
  566. region: undefined,
  567. time: undefined
  568. });
  569. },
  570. //搜索部分的清零
  571. reset() {
  572. this.state.nameSearch = undefined;
  573. this.loadData();
  574. },
  575. imgOk() {
  576. this.setState({
  577. imgeditvisible: false
  578. });
  579. },
  580. getOrgCodeUrl(e) {
  581. this.setState({ bannerUrl: e });
  582. },
  583. render() {
  584. const FormItem = Form.Item;
  585. const rowSelection = {
  586. selectedRowKeys: this.state.selectedRowKeys,
  587. onChange: (selectedRowKeys, selectedRows) => {
  588. this.setState({
  589. selectedRows: selectedRows.slice(-1),
  590. selectedRowKeys: selectedRowKeys.slice(-1)
  591. });
  592. }
  593. };
  594. const { TextArea } = Input; //文本域
  595. const { TabPane } = Tabs; //标签页
  596. const { MonthPicker, RangePicker, WeekPicker } = DatePicker; //日期输入框
  597. const dateFormat = "YYYY/MM/DD"; //日期格式
  598. const theData = this.state.data || {};
  599. return (
  600. <div className="user-content">
  601. <div className="content-title">
  602. <span>招聘列表</span>
  603. <div className="user-search">
  604. <Input
  605. placeholder="请输入职位名称"
  606. value={this.state.nameSearch}
  607. onChange={e => {
  608. this.setState({ nameSearch: e.target.value });
  609. }}
  610. style={{
  611. width: "150px",
  612. marginRight: "10px",
  613. marginBottom: "10px"
  614. }}
  615. />
  616. <Button
  617. type="primary"
  618. onClick={this.search}
  619. style={{ marginRight: "10px" }}
  620. >
  621. 搜索
  622. </Button>
  623. <Button onClick={this.reset} style={{ marginRight: "10px" }}>
  624. 重置
  625. </Button>
  626. <Button
  627. type="primary"
  628. onClick={this.add}
  629. style={{ marginLeft: "100px" }}
  630. >
  631. 新增职位
  632. </Button>
  633. </div>
  634. <div className="patent-table">
  635. <SpinContainer spinning={this.state.loading}>
  636. <Table
  637. columns={this.state.columns}
  638. dataSource={this.state.dataSource}
  639. onRowClick={this.tableRowClick}
  640. pagination={this.state.pagination}
  641. bordered
  642. size="small"
  643. />
  644. </SpinContainer>
  645. </div>
  646. </div>
  647. <div className="patent-desc">
  648. <Modal
  649. className="customeDetails"
  650. title={this.state.flag ? "职位详情" : "新增职位"}
  651. visible={this.state.editvisible}
  652. onOk={this.edithandleCancel}
  653. width={"1000px"}
  654. onCancel={
  655. this.state.flag ? this.edithandleCancel : this.cancelAdd
  656. }
  657. footer=""
  658. >
  659. <Form
  660. layout="horizontal"
  661. onSubmit={this.edithandleSubmit}
  662. id="demand-form"
  663. >
  664. <SpinContainer spinning={this.state.loading}>
  665. <div className="clearfix">
  666. <FormItem
  667. className="half-item"
  668. labelCol={{ span: 8 }}
  669. wrapperCol={{ span: 12 }}
  670. label="职位名称"
  671. >
  672. <Input
  673. placeholder="请输入职位名称"
  674. value={this.state.name}
  675. onChange={e => {
  676. this.setState({ name: e.target.value });
  677. }}
  678. style={{ width: "240px" }}
  679. />
  680. </FormItem>
  681. <div className="clearfix">
  682. <FormItem
  683. className="half-item"
  684. labelCol={{ span: 8 }}
  685. wrapperCol={{ span: 12 }}
  686. label="发布时间"
  687. >
  688. <DatePicker
  689. placeholder="请输入发布时间"
  690. format="YYYY-MM-DD HH:mm:ss"
  691. showTime
  692. value={
  693. this.state.time ? moment(this.state.time) : null
  694. }
  695. onChange={(e, f) => {
  696. this.setState({ time: f });
  697. }}
  698. style={{ width: "240px" }}
  699. />
  700. </FormItem>
  701. </div>
  702. <div className="clearfix">
  703. <FormItem
  704. className="half-item"
  705. labelCol={{ span: 8 }}
  706. wrapperCol={{ span: 12 }}
  707. label="招聘省份"
  708. >
  709. <Select
  710. style={{ width: 120 }}
  711. placeholder="请选择省份"
  712. value={this.state.province}
  713. onChange={e => {
  714. this.setState({
  715. province: e
  716. });
  717. let str = "";
  718. provinceStatus.forEach(item => {
  719. if (item.value == e) {
  720. str = item.key;
  721. }
  722. });
  723. placeList.forEach(item => {
  724. item.children.forEach(key => {
  725. if (key == str) {
  726. this.setState({
  727. regionStr: item.place,
  728. region: item.value
  729. });
  730. }
  731. });
  732. });
  733. }}
  734. >
  735. {provinceStatus.map(item => {
  736. return (
  737. <Option value={item.value}>{item.key}</Option>
  738. );
  739. })}
  740. </Select>
  741. </FormItem>
  742. </div>
  743. <FormItem
  744. className="half-item"
  745. labelCol={{ span: 8 }}
  746. wrapperCol={{ span: 12 }}
  747. label="排序"
  748. >
  749. <Input
  750. placeholder="请输入数字"
  751. value={this.state.sort}
  752. onChange={e => {
  753. this.setState({
  754. sort: e.target.value
  755. });
  756. }}
  757. style={{ width: "140px" }}
  758. />
  759. </FormItem>
  760. </div>
  761. <div className="clearfix">
  762. <FormItem
  763. labelCol={{ span: 4 }}
  764. wrapperCol={{ span: 18 }}
  765. label="招聘内容"
  766. >
  767. <Editors
  768. textContent={this.state.editorcontext}
  769. uploadUrl={"/api/admin/recruitment/uploadFile"}
  770. globalConfig={globalConfig.uploadPath}
  771. placeholder="业务项目客户基本条件"
  772. handleRichText={value => {
  773. // this.setState({ editorcontext: value });
  774. this.setState({
  775. editorcontext: value
  776. });
  777. }}
  778. />
  779. </FormItem>
  780. </div>
  781. <div className="clearfix">
  782. <Button
  783. type="primary"
  784. size="large"
  785. onClick={e => {
  786. this.addNew(0);
  787. }}
  788. style={{
  789. float: "right",
  790. marginRight: "80px",
  791. marginTop: "20px"
  792. }}
  793. >
  794. 保存
  795. </Button>
  796. <Button
  797. type="primary"
  798. size="large"
  799. onClick={e => {
  800. this.addNew(1);
  801. }}
  802. style={{
  803. float: "right",
  804. marginRight: "20px",
  805. marginTop: "20px"
  806. }}
  807. >
  808. 保存并发布
  809. </Button>
  810. </div>
  811. </SpinContainer>
  812. </Form>
  813. </Modal>
  814. </div>
  815. <Modal
  816. visible={this.state.imgeditvisible}
  817. onCancel={this.imghandleCancel}
  818. onOk={this.imgOk}
  819. >
  820. <img style={{ width: "100%" }} src={this.state.maximg} />
  821. </Modal>
  822. </div>
  823. );
  824. }
  825. })
  826. );
  827. export default TalentsList;