projectvip.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import "./public.less";
  4. import "./shouKuan.less";
  5. import { AutoComplete, Button, Input, Spin, Table, Select, message, Tabs, Tag, Tooltip, Modal } from "antd";
  6. import OrderDesc from "../orderDetail/orderDesc";
  7. import ResolutionDetail from "@/resolutionDetail";
  8. import { ChooseList } from "../../order/orderNew/chooseList"
  9. import ReactToPrint from "react-to-print";
  10. import OrderItemStatus from "../../../common/orderItemStatus";
  11. const { TabPane } = Tabs;
  12. const ProjectVip = React.createClass({
  13. //
  14. getInitialState() {
  15. return {
  16. dvisible: false,
  17. pageNo: 1,
  18. totalPage: 0,
  19. searchValues: {
  20. status: "1"
  21. },//查询条件
  22. loading: false,
  23. changeList: undefined,// 子组件改变的表格title数组
  24. pagination: {
  25. defaultCurrent: 1,
  26. defaultPageSize: 10,
  27. showQuickJumper: true,
  28. pageSize: 10,
  29. onChange: function (page) {
  30. this.setState({
  31. pageNo: page,
  32. });
  33. this.loadData(page);
  34. }.bind(this),
  35. showTotal: function (total) {
  36. return "共" + total + "条数据";
  37. },
  38. },
  39. columns: [
  40. // {
  41. // title: "销售类型",
  42. // dataIndex: "salesType",
  43. // key: "salesType",
  44. // render: (text, record) => {
  45. // return (
  46. // <Tooltip
  47. // title={salesList[text] + ((text == 3 || text == 4 || text == 5) ? (!record.other ? "" : "," + record.other) : "")}
  48. // >
  49. // <span>
  50. // {salesList[text]}
  51. // </span>
  52. // </Tooltip>
  53. // );
  54. // },
  55. // },
  56. {
  57. title: "合同编号",
  58. dataIndex: "contractNo",
  59. key: "contractNo",
  60. width: 160,
  61. render: (text, record) => {
  62. return (
  63. <Tooltip
  64. title={
  65. <Button
  66. type="primary"
  67. onClick={(e) => {
  68. e.stopPropagation();
  69. let input = document.getElementById("copyText");
  70. input.value = text;
  71. input.select();
  72. document.execCommand("copy");
  73. message.success("复制成功");
  74. }}
  75. >
  76. 复制
  77. </Button>
  78. }
  79. >
  80. <div>
  81. {text}
  82. <div style={{ display: "flex" }}>
  83. {/* <OrderItemStatus deleteSign={record.deleteSign} /> */}
  84. {
  85. record.approval == 1
  86. ? <Tag color="#faa755">特批待审</Tag> :
  87. record.approval == 2 && <Tag color="#ff0000">特批通过</Tag>
  88. }
  89. </div>
  90. </div>
  91. </Tooltip>
  92. );
  93. },
  94. },
  95. {
  96. title: "客户名称",
  97. dataIndex: "userName",
  98. key: "userName",
  99. width: 200,
  100. render: text => {
  101. return (
  102. <Tooltip title={text}>
  103. <div>{text}</div>
  104. </Tooltip>
  105. )
  106. }
  107. },
  108. {
  109. title: "订单编号",
  110. dataIndex: "orderNo",
  111. key: "orderNo",
  112. width: 140,
  113. render: (text, record) => {
  114. return (
  115. <Tooltip
  116. title={
  117. <Button
  118. type="primary"
  119. onClick={(e) => {
  120. e.stopPropagation();
  121. let input = document.getElementById("copyText");
  122. input.value = text;
  123. input.select();
  124. document.execCommand("copy");
  125. message.success("复制成功");
  126. }}
  127. >
  128. 复制
  129. </Button>
  130. }
  131. >
  132. <div>
  133. {text}
  134. <div>
  135. {record.signTotalAmount >= 10 && <Tag color="#ef7207">大客户</Tag>}
  136. {record.projectType == 1 && <Tag color="rgb(22, 155, 213)">会员</Tag>}
  137. </div>
  138. </div>
  139. </Tooltip>
  140. );
  141. },
  142. },
  143. {
  144. title: "订单部门",
  145. dataIndex: "depName",
  146. key: "depName",
  147. className: "title-table",
  148. },
  149. {
  150. title: "订单负责人",
  151. dataIndex: "salesmanName",
  152. key: "salesmanName",
  153. className: "title-table",
  154. },
  155. {
  156. title: "财务负责人",
  157. dataIndex: "financeName",
  158. key: "financeName",
  159. className: "title-table",
  160. },
  161. {
  162. title: "会员项目",
  163. dataIndex: "projectName",
  164. key: "projectName",
  165. className: "title-table",
  166. },
  167. {
  168. title: "项目说明",
  169. dataIndex: "projectComment",
  170. key: "projectComment",
  171. className: "title-table",
  172. width: 200,
  173. },
  174. {
  175. title: "状态",
  176. dataIndex: "status",
  177. key: "status",
  178. className: "title-table",
  179. render: (text) => {
  180. return (
  181. <div>
  182. {["", "财务审核", "特批审核", "通过", "驳回"][text]}
  183. </div>
  184. );
  185. }
  186. },
  187. {
  188. title: "操作",
  189. dataIndex: "caozuo",
  190. key: "caouzo",
  191. className: "title-table",
  192. width: 150,
  193. render: (text, recard) => {
  194. return (
  195. <div>
  196. {
  197. recard.status == 1 &&
  198. <Button
  199. type="primary"
  200. onClick={(e) => {
  201. e.stopPropagation(),
  202. this.checkRemark(recard, 1);
  203. }}
  204. >
  205. 通过
  206. </Button>
  207. }
  208. {
  209. recard.status == 1 &&
  210. <Button
  211. type="danger"
  212. style={{ marginLeft: "5px", }}
  213. onClick={(e) => {
  214. e.stopPropagation(),
  215. this.checkRemark(recard, 0);
  216. }}
  217. >
  218. 驳回
  219. </Button>
  220. }
  221. </div>
  222. );
  223. },
  224. },
  225. ],
  226. dataSource: [],
  227. fjlist: [],// 营销员列表
  228. checkOrderNo: "",//操作订单编号
  229. checkData: "",//操作描述
  230. checkVisible: "",//审核弹窗开关
  231. checkId: "",//会员项目编号
  232. result: -1,//1同意 0驳回
  233. };
  234. },
  235. componentWillMount() {
  236. this.loadData();
  237. this.departmentList();
  238. },
  239. // 获取订单部门
  240. departmentList() {
  241. $.ajax({
  242. method: "get",
  243. dataType: "json",
  244. crossDomain: false,
  245. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  246. data: {},
  247. success: function (data) {
  248. let thedata = data.data;
  249. let theArr = [];
  250. if (!thedata) {
  251. if (data.error && data.error.length) {
  252. message.warning(data.error[0].message);
  253. }
  254. } else {
  255. thedata.map(function (item, index) {
  256. theArr.push({
  257. key: index,
  258. name: item.name,
  259. id: item.id,
  260. });
  261. });
  262. }
  263. this.setState({
  264. departmentArr: theArr,
  265. });
  266. }.bind(this),
  267. }).always(
  268. function () {
  269. }.bind(this)
  270. );
  271. },
  272. // 列表数据
  273. loadData(pageNo, pageSize) {
  274. const { searchValues, pagination } = this.state
  275. this.setState({
  276. loading: true,
  277. });
  278. let datas = Object.assign(searchValues, {
  279. pageNo: pageNo || 1,
  280. pageSize: pageSize || 10,
  281. shiroType: 2, //财务审核
  282. });
  283. $.ajax({
  284. method: "get",
  285. dataType: "json",
  286. crossDomain: false,
  287. url: globalConfig.context + "/api/admin/orderProject/memberList",
  288. data: datas,
  289. success: function (data) {
  290. this.setState({
  291. loading: false,
  292. });
  293. if (data.error && data.error.length === 0) {
  294. if (data.data.list) {
  295. pagination.current = data.data.pageNo;
  296. pagination.total = data.data.totalCount;
  297. if (data.data && data.data.list && !data.data.list.length) {
  298. pagination.current = 0;
  299. pagination.total = 0;
  300. }
  301. this.setState({
  302. dataSource: data.data.list,
  303. pagination: this.state.pagination,
  304. pageNo: data.data.pageNo,
  305. totalPage: data.data.totalPage,
  306. });
  307. } else {
  308. this.setState({
  309. dataSource: data.data,
  310. pagination: false,
  311. });
  312. }
  313. } else {
  314. message.warning(data.error[0].message);
  315. }
  316. }.bind(this),
  317. }).always(
  318. function () {
  319. this.setState({
  320. loading: false,
  321. });
  322. }.bind(this)
  323. );
  324. },
  325. // 点击行
  326. tableRowClick(record) {
  327. this.state.RowData = record;
  328. this.setState({
  329. showDesc: true,
  330. });
  331. },
  332. // 关闭
  333. closeDesc(e, s) {
  334. this.state.showDesc = e;
  335. if (s) {
  336. this.loadData(this.state.page);
  337. }
  338. },
  339. // 搜索
  340. search() {
  341. this.setState({
  342. selectedRowKeys: []
  343. })
  344. this.loadData();
  345. },
  346. // 重置
  347. reset() {
  348. this.setState({
  349. searchValues: JSON.parse(JSON.stringify({})),
  350. }, () => {
  351. this.loadData();
  352. })
  353. },
  354. // 点击审核
  355. checkRemark(record, nmb) {
  356. this.setState({
  357. checkVisible: true,
  358. checkId: record.id,
  359. result: nmb
  360. });
  361. },
  362. // 审核
  363. toExamine() {
  364. if (!this.state.content) {
  365. message.warning("请填写审核说明~");
  366. return;
  367. }
  368. this.setState({
  369. loading: true,
  370. });
  371. $.ajax({
  372. method: "POST",
  373. dataType: "json",
  374. crossDomain: false,
  375. url: globalConfig.context + "/api/admin/orderProject/examineMemberProject",
  376. data: {
  377. id: this.state.checkId,
  378. remarks: this.state.content,
  379. result: this.state.result, //1同意 0驳回
  380. type: 0, //0财务审核 1特批审核
  381. },
  382. }).done(
  383. function (data) {
  384. if (!data.error.length) {
  385. message.success("审核成功!");
  386. this.setState({
  387. loading: false,
  388. });
  389. this.loadData()
  390. } else {
  391. message.warning(data.error[0].message);
  392. }
  393. }.bind(this)
  394. );
  395. },
  396. // 更改表格显示数据
  397. changeList(arr) {
  398. const newArr = [];
  399. this.state.columns.forEach((item) => {
  400. arr.forEach((val) => {
  401. if (val === item.title) {
  402. newArr.push(item);
  403. }
  404. });
  405. });
  406. this.setState({
  407. changeList: newArr,
  408. });
  409. },
  410. // 导出当前列表
  411. exportAll() {
  412. message.config({
  413. duration: 20,
  414. });
  415. let loading = message.loading("下载中...");
  416. this.setState({
  417. exportPendingLoading: true,
  418. });
  419. let data = {
  420. shiroType: 2, //财务审核
  421. };
  422. let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
  423. data = Object.assign(data, obj1);
  424. $.ajax({
  425. method: "get",
  426. dataType: "json",
  427. crossDomain: false,
  428. url: "/api/admin/orderProject/memberList/export",
  429. data,
  430. success: function (data) {
  431. if (data.error.length === 0) {
  432. this.download(data.data);
  433. } else {
  434. message.warning(data.error[0].message);
  435. }
  436. }.bind(this),
  437. }).always(
  438. function () {
  439. loading();
  440. this.setState({
  441. exportPendingLoading: false,
  442. });
  443. }.bind(this)
  444. );
  445. },
  446. // 打印
  447. printAll() {
  448. this.setState({
  449. dvisible: true,
  450. });
  451. this.loadData(1, 9999999);
  452. },
  453. // 下载
  454. download(fileName) {
  455. window.location.href =
  456. globalConfig.context + "/open/download?fileName=" + fileName;
  457. },
  458. // 查询订单负责人列表
  459. followUp(e) {
  460. const { searchValues } = this.state;
  461. this.setState({
  462. searchValues: Object.assign(searchValues, {
  463. aname: e,
  464. }),
  465. });
  466. $.ajax({
  467. method: "get",
  468. dataType: "json",
  469. crossDomain: false,
  470. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  471. data: {
  472. adminName: e,
  473. },
  474. success: function (data) {
  475. let thedata = data.data;
  476. if (!thedata) {
  477. if (data.error && data.error.length) {
  478. message.warning(data.error[0].message);
  479. }
  480. thedata = {};
  481. }
  482. this.setState({
  483. fjlist: thedata,
  484. });
  485. }.bind(this),
  486. }).always(
  487. function () {
  488. this.setState({
  489. loading: false,
  490. });
  491. }.bind(this)
  492. );
  493. },
  494. // 选中订单负责人
  495. selectF(value) {
  496. const { searchValues, fjlist } = this.state;
  497. const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
  498. this.setState({
  499. searchValues: Object.assign(searchValues, {
  500. salesmanId: newdataSources.find((item) => item.name == value).id,
  501. }),
  502. });
  503. },
  504. // 失去焦点
  505. blurChange(e) {
  506. let theType = "";
  507. let contactLists = this.state.customerArr || [];
  508. if (e) {
  509. contactLists.map(function (item) {
  510. if (item.name == e.toString()) {
  511. theType = item.id;
  512. }
  513. });
  514. }
  515. this.setState({
  516. theTypes: theType,
  517. });
  518. },
  519. // 删除数组最后一项(删除操作列)
  520. truncate(arr) {
  521. return arr.filter(function (v, i, ar) {
  522. return i !== ar.length - 1
  523. })
  524. },
  525. render() {
  526. const { TextArea } = Input
  527. const { searchValues, departmentArr = [] } = this.state
  528. const dataSources = this.state.fjlist || [];
  529. const options = dataSources.map((group) => (
  530. <Select.Option key={group.id} value={group.name}>
  531. {group.name}
  532. </Select.Option>
  533. ));
  534. return (
  535. <div className="user-content">
  536. <div className="content-title" style={{ marginBottom: 10 }}>
  537. <span style={{ fontWeight: 900, fontSize: 16 }}>会员项目审核</span>
  538. </div>
  539. <Tabs defaultActiveKey="2" onChange={this.callback} className="test">
  540. <TabPane tab="更改表格显示数据" key="1">
  541. <div style={{ marginLeft: 10 }}>
  542. <ChooseList
  543. columns={this.state.columns}
  544. changeFn={this.changeList}
  545. changeList={this.state.changeList}
  546. top={55}
  547. margin={11}
  548. />
  549. </div>
  550. </TabPane>
  551. <TabPane tab="搜索" key="2">
  552. <div className="user-search" style={{ marginLeft: 10 }}>
  553. <Input
  554. placeholder="订单编号"
  555. value={searchValues["orderNo"]
  556. ? searchValues["orderNo"]
  557. : ""}
  558. onChange={(e) => {
  559. searchValues["orderNo"] = e.target.value;
  560. this.setState({
  561. searchValues: searchValues,
  562. });
  563. }}
  564. />
  565. <Input
  566. placeholder="客户名称"
  567. value={searchValues["userName"]
  568. ? searchValues["userName"]
  569. : ""}
  570. onChange={(e) => {
  571. searchValues["userName"] = e.target.value;
  572. this.setState({
  573. searchValues: searchValues,
  574. });
  575. }}
  576. />
  577. <Select
  578. placeholder="订单部门"
  579. style={{ width: 190, marginRight: 10 }}
  580. value={searchValues["depId"]
  581. ? searchValues["depId"]
  582. : undefined}
  583. onChange={(e) => {
  584. searchValues["depId"] = e;
  585. this.setState({
  586. searchValues: searchValues,
  587. });
  588. }}
  589. >
  590. {departmentArr.map(function (item) {
  591. return (
  592. <Select.Option key={item.id}>{item.name}</Select.Option>
  593. );
  594. })}
  595. </Select>
  596. <Input
  597. placeholder="合同编号"
  598. value={searchValues["contractNo"]
  599. ? searchValues["contractNo"]
  600. : ""}
  601. onChange={(e) => {
  602. searchValues["contractNo"] = e.target.value;
  603. this.setState({
  604. searchValues: searchValues,
  605. });
  606. }}
  607. />
  608. <AutoComplete
  609. className="certain-category-search"
  610. dropdownClassName="certain-category-search-dropdown"
  611. dropdownMatchSelectWidth={false}
  612. style={{ width: "120px" }}
  613. dataSource={options}
  614. placeholder="订单负责人"
  615. value={searchValues.aname || undefined}
  616. onChange={this.followUp.bind(this)}
  617. filterOption={true}
  618. onSelect={this.selectF.bind(this)}
  619. >
  620. <Input />
  621. </AutoComplete>
  622. <Input
  623. placeholder="项目名称"
  624. value={searchValues["projectName"]
  625. ? searchValues["projectName"]
  626. : ""}
  627. onChange={(e) => {
  628. searchValues["projectName"] = e.target.value;
  629. this.setState({
  630. searchValues: searchValues,
  631. });
  632. }}
  633. />
  634. <Select
  635. style={{ width: 120 }}
  636. placeholder="签单金额"
  637. value={searchValues["amountStatus"]
  638. ? searchValues["amountStatus"]
  639. : undefined}
  640. onChange={(e) => {
  641. searchValues["amountStatus"] = e;
  642. this.setState({
  643. searchValues: searchValues,
  644. });
  645. }}
  646. >
  647. <Option value="0">10万元以下</Option>
  648. <Option value="1">10~20万元</Option>
  649. <Option value="2">20~30万元</Option>
  650. <Option value="3">30~40万元</Option>
  651. <Option value="4">40万元以上</Option>
  652. </Select>
  653. <Select
  654. style={{ width: 120 }}
  655. placeholder="特批状态"
  656. value={searchValues["approval"]
  657. ? searchValues["approval"]
  658. : undefined}
  659. onChange={(e) => {
  660. searchValues["approval"] = e;
  661. this.setState({
  662. searchValues: searchValues,
  663. });
  664. }}
  665. >
  666. <Option value="0">非特批</Option>
  667. <Option value="1">特批待审</Option>
  668. <Option value="2">特批通过</Option>
  669. <Option value="4">全部特批</Option>
  670. </Select>
  671. <Select
  672. style={{ width: 120 }}
  673. placeholder="审核状态"
  674. value={searchValues["status"]
  675. ? searchValues["status"]
  676. : undefined}
  677. onChange={(e) => {
  678. searchValues["status"] = e;
  679. this.setState({
  680. searchValues: searchValues,
  681. });
  682. }}
  683. >
  684. <Option value="1">财务审核</Option>
  685. <Option value="2">特批审核</Option>
  686. <Option value="3">通过</Option>
  687. <Option value="4">全部</Option>
  688. </Select>
  689. <Button
  690. type="primary"
  691. onClick={this.search}
  692. style={{ marginLeft: 10 }}
  693. disabled={this.state.loading ? true : false}
  694. >
  695. 搜索
  696. </Button>
  697. <Button onClick={this.reset}>重置</Button>
  698. </div>
  699. </TabPane>
  700. <TabPane tab="打印" key="3">
  701. <Button
  702. type="primary"
  703. style={{ margin: "11px 0px 10px 10px" }}
  704. onClick={this.printAll}
  705. >
  706. 打印当前列表
  707. </Button>
  708. </TabPane>
  709. <TabPane tab="导出Excel" key="4">
  710. <Button
  711. type="primary"
  712. style={{ margin: "11px 0px 10px 10px" }}
  713. onClick={this.exportAll}
  714. >
  715. 导出当前列表
  716. </Button>
  717. </TabPane>
  718. </Tabs>
  719. <div className="patent-table">
  720. <Spin spinning={this.state.loading}>
  721. <Table
  722. bordered
  723. columns={
  724. this.state.changeList == undefined
  725. ? this.state.columns
  726. : this.state.changeList
  727. }
  728. dataSource={this.state.dataSource}
  729. pagination={this.state.pagination}
  730. onRowDoubleClick={this.tableRowClick.bind(this)}
  731. size="small"
  732. />
  733. </Spin>
  734. </div>
  735. {/* 订单详情 */}
  736. <OrderDesc
  737. data={this.state.RowData}
  738. showDesc={this.state.showDesc}
  739. closeDesc={this.closeDesc.bind(this)}
  740. />
  741. {
  742. //打印预览
  743. this.state.dvisible &&
  744. <Modal
  745. visible={this.state.dvisible}
  746. footer=""
  747. title="所有列表信息"
  748. className="admin-desc-content"
  749. width="1300px"
  750. onCancel={() => {
  751. this.loadData();
  752. this.setState({
  753. dvisible: false,
  754. });
  755. }}
  756. >
  757. <Spin spinning={this.state.loading}>
  758. <div
  759. className="patent-table"
  760. style={{
  761. padding: "25px 0 30px 30px",
  762. }}
  763. ref={(e) => {
  764. this.refs.all = e;
  765. }}
  766. >
  767. <Table
  768. columns={this.truncate(this.state.columns)}
  769. dataSource={this.state.dataSource}
  770. pagination={false}
  771. bordered
  772. size="small"
  773. />
  774. </div>
  775. </Spin>
  776. <ReactToPrint
  777. trigger={() => (
  778. <Button
  779. type="primary"
  780. style={{
  781. float: "right",
  782. marginTop: 10,
  783. position: "absolute",
  784. top: 0,
  785. right: 30,
  786. }}
  787. >
  788. 打印
  789. </Button>
  790. )}
  791. content={() => this.refs.all}
  792. />
  793. </Modal>
  794. }
  795. {
  796. //审核弹窗
  797. this.state.checkVisible &&
  798. <Modal
  799. maskClosable={false}
  800. title="审核订单"
  801. confirmLoading={this.state.loading}
  802. visible={this.state.checkVisible}
  803. onOk={this.toExamine}
  804. okText={this.state.result == 1 ? "通过" : this.state.result == 0 && "驳回"}
  805. onCancel={() => {
  806. this.loadData()
  807. this.setState({
  808. checkVisible: false,
  809. checkData: '',
  810. })
  811. }}
  812. >
  813. <TextArea
  814. value={this.state.checkData}
  815. onChange={(e) => {
  816. this.setState({
  817. checkData: e.target.value,
  818. })
  819. }}
  820. placeholder="请填写审核内容"
  821. />
  822. </Modal>
  823. }
  824. </div>
  825. );
  826. },
  827. });
  828. export default ProjectVip;