projectvipall.jsx 23 KB

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