myprojectvip.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785
  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 "../../financialManage/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. import ProjectOperationVip from ".././../../common/projectOperation/vip";
  10. import ShowModalDiv from "@/showModal.jsx";
  11. const { TabPane } = Tabs;
  12. //我的会员项目列表
  13. const MyProjectVip = React.createClass({
  14. //
  15. getInitialState() {
  16. return {
  17. dvisible: false,
  18. pageNo: 1,
  19. totalPage: 0,
  20. searchValues: {},//查询条件
  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 style={{ color: text == 4 && "red" }}>
  190. {["", "财务审核", "特批审核", "通过", "驳回"][text]}
  191. </div>
  192. );
  193. }
  194. },
  195. {
  196. title: "操作",
  197. dataIndex: "caozuo",
  198. key: "caouzo",
  199. className: "title-table",
  200. width: 150,
  201. render: (text, recard) => {
  202. return (
  203. <div>
  204. {
  205. recard.status == 4 &&
  206. <Button
  207. type="primary"
  208. onClick={() => {
  209. this.setState({
  210. vipVisible: true,
  211. dataInfor: recard,
  212. })
  213. }}
  214. >
  215. 重新提交
  216. </Button>
  217. }
  218. </div>
  219. );
  220. },
  221. },
  222. ],
  223. dataSource: [],
  224. fjlist: [],// 营销员列表
  225. checkOrderNo: "",//操作订单编号
  226. checkData: "",//操作描述
  227. checkVisible: "",//审核弹窗开关
  228. checkId: "",//会员项目编号
  229. result: -1,//1同意 0驳回
  230. vipVisible: false,//编辑弹窗
  231. dataInfor: {},//编辑的数据
  232. };
  233. },
  234. componentWillMount() {
  235. this.loadData();
  236. this.departmentList();
  237. },
  238. // 关闭编辑弹窗
  239. vipClose() {
  240. this.setState({
  241. vipVisible: false
  242. }, () => {
  243. this.loadData();
  244. })
  245. },
  246. // 获取订单部门
  247. departmentList() {
  248. $.ajax({
  249. method: "get",
  250. dataType: "json",
  251. crossDomain: false,
  252. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  253. data: {},
  254. success: function (data) {
  255. let thedata = data.data;
  256. let theArr = [];
  257. if (!thedata) {
  258. if (data.error && data.error.length) {
  259. message.warning(data.error[0].message);
  260. }
  261. } else {
  262. thedata.map(function (item, index) {
  263. theArr.push({
  264. key: index,
  265. name: item.name,
  266. id: item.id,
  267. });
  268. });
  269. }
  270. this.setState({
  271. departmentArr: theArr,
  272. });
  273. }.bind(this),
  274. }).always(
  275. function () {
  276. }.bind(this)
  277. );
  278. },
  279. // 列表数据
  280. loadData(pageNo, pageSize) {
  281. const { searchValues, pagination } = this.state
  282. this.setState({
  283. loading: true,
  284. });
  285. let datas = Object.assign(searchValues, {
  286. pageNo: pageNo || 1,
  287. pageSize: pageSize || 10,
  288. shiroType: 1, //营销员
  289. });
  290. $.ajax({
  291. method: "get",
  292. dataType: "json",
  293. crossDomain: false,
  294. url: globalConfig.context + "/api/admin/orderProject/memberList",
  295. data: datas,
  296. success: function (data) {
  297. this.setState({
  298. loading: false,
  299. });
  300. if (data.error && data.error.length === 0) {
  301. if (data.data.list) {
  302. pagination.current = data.data.pageNo;
  303. pagination.total = data.data.totalCount;
  304. if (data.data && data.data.list && !data.data.list.length) {
  305. pagination.current = 0;
  306. pagination.total = 0;
  307. }
  308. this.setState({
  309. dataSource: data.data.list,
  310. pagination: this.state.pagination,
  311. pageNo: data.data.pageNo,
  312. totalPage: data.data.totalPage,
  313. });
  314. } else {
  315. this.setState({
  316. dataSource: data.data,
  317. pagination: false,
  318. });
  319. }
  320. } else {
  321. message.warning(data.error[0].message);
  322. }
  323. }.bind(this),
  324. }).always(
  325. function () {
  326. this.setState({
  327. loading: false,
  328. });
  329. }.bind(this)
  330. );
  331. },
  332. // 点击行
  333. tableRowClick(record) {
  334. this.state.RowData = record;
  335. this.setState({
  336. showDesc: true,
  337. });
  338. },
  339. // 关闭
  340. closeDesc(e, s) {
  341. this.state.showDesc = e;
  342. if (s) {
  343. this.loadData(this.state.page);
  344. }
  345. },
  346. // 搜索
  347. search() {
  348. this.setState({
  349. selectedRowKeys: []
  350. })
  351. this.loadData();
  352. },
  353. // 重置
  354. reset() {
  355. this.setState({
  356. searchValues: JSON.parse(JSON.stringify({})),
  357. }, () => {
  358. this.loadData();
  359. })
  360. },
  361. // 更改表格显示数据
  362. changeList(arr) {
  363. const newArr = [];
  364. this.state.columns.forEach((item) => {
  365. arr.forEach((val) => {
  366. if (val === item.title) {
  367. newArr.push(item);
  368. }
  369. });
  370. });
  371. this.setState({
  372. changeList: newArr,
  373. });
  374. },
  375. // 导出当前列表
  376. exportAll() {
  377. message.config({
  378. duration: 20,
  379. });
  380. let loading = message.loading("下载中...");
  381. this.setState({
  382. exportPendingLoading: true,
  383. });
  384. let data = {
  385. shiroType: 1, //我的
  386. };
  387. let obj1 = JSON.parse(JSON.stringify(this.state.searchValues));
  388. data = Object.assign(data, obj1);
  389. $.ajax({
  390. method: "get",
  391. dataType: "json",
  392. crossDomain: false,
  393. url: "/api/admin/orderProject/memberList/export",
  394. data,
  395. success: function (data) {
  396. if (data.error.length === 0) {
  397. this.download(data.data);
  398. } else {
  399. message.warning(data.error[0].message);
  400. }
  401. }.bind(this),
  402. }).always(
  403. function () {
  404. loading();
  405. this.setState({
  406. exportPendingLoading: false,
  407. });
  408. }.bind(this)
  409. );
  410. },
  411. // 打印
  412. printAll() {
  413. this.setState({
  414. dvisible: true,
  415. });
  416. this.loadData(1, 9999999);
  417. },
  418. // 下载
  419. download(fileName) {
  420. window.location.href =
  421. globalConfig.context + "/open/download?fileName=" + fileName;
  422. },
  423. // 查询订单负责人列表
  424. followUp(e) {
  425. const { searchValues } = this.state;
  426. this.setState({
  427. searchValues: Object.assign(searchValues, {
  428. aname: e,
  429. }),
  430. });
  431. $.ajax({
  432. method: "get",
  433. dataType: "json",
  434. crossDomain: false,
  435. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  436. data: {
  437. adminName: e,
  438. },
  439. success: function (data) {
  440. let thedata = data.data;
  441. if (!thedata) {
  442. if (data.error && data.error.length) {
  443. message.warning(data.error[0].message);
  444. }
  445. thedata = {};
  446. }
  447. this.setState({
  448. fjlist: thedata,
  449. });
  450. }.bind(this),
  451. }).always(
  452. function () {
  453. this.setState({
  454. loading: false,
  455. });
  456. }.bind(this)
  457. );
  458. },
  459. // 选中订单负责人
  460. selectF(value) {
  461. const { searchValues, fjlist } = this.state;
  462. const newdataSources = JSON.stringify(fjlist) == "{}" ? [] : fjlist;
  463. this.setState({
  464. searchValues: Object.assign(searchValues, {
  465. salesmanId: newdataSources.find((item) => item.name == value).id,
  466. }),
  467. });
  468. },
  469. // 失去焦点
  470. blurChange(e) {
  471. let theType = "";
  472. let contactLists = this.state.customerArr || [];
  473. if (e) {
  474. contactLists.map(function (item) {
  475. if (item.name == e.toString()) {
  476. theType = item.id;
  477. }
  478. });
  479. }
  480. this.setState({
  481. theTypes: theType,
  482. });
  483. },
  484. // 删除数组最后一项(删除操作列)
  485. truncate(arr) {
  486. return arr.filter(function (v, i, ar) {
  487. return i !== ar.length - 1
  488. })
  489. },
  490. render() {
  491. const { TextArea } = Input
  492. const { searchValues, departmentArr = [] } = this.state
  493. const dataSources = this.state.fjlist || [];
  494. const options = dataSources.map((group) => (
  495. <Select.Option key={group.id} value={group.name}>
  496. {group.name}
  497. </Select.Option>
  498. ));
  499. return (
  500. <div className="user-content">
  501. <ShowModalDiv ShowModal={this.state.showModal} />
  502. <div className="content-title" style={{ marginBottom: 10 }}>
  503. <span style={{ fontWeight: 900, fontSize: 16 }}>我的会员项目</span>
  504. </div>
  505. <Tabs defaultActiveKey="2" onChange={this.callback} className="test">
  506. <TabPane tab="更改表格显示数据" key="1">
  507. <div style={{ marginLeft: 10 }}>
  508. <ChooseList
  509. columns={this.state.columns}
  510. changeFn={this.changeList}
  511. changeList={this.state.changeList}
  512. top={55}
  513. margin={11}
  514. />
  515. </div>
  516. </TabPane>
  517. <TabPane tab="搜索" key="2">
  518. <div className="user-search" style={{ marginLeft: 10 }}>
  519. <Input
  520. placeholder="订单编号"
  521. value={searchValues["orderNo"]
  522. ? searchValues["orderNo"]
  523. : ""}
  524. onChange={(e) => {
  525. searchValues["orderNo"] = e.target.value;
  526. this.setState({
  527. searchValues: searchValues,
  528. });
  529. }}
  530. />
  531. <Input
  532. placeholder="客户名称"
  533. value={searchValues["userName"]
  534. ? searchValues["userName"]
  535. : ""}
  536. onChange={(e) => {
  537. searchValues["userName"] = e.target.value;
  538. this.setState({
  539. searchValues: searchValues,
  540. });
  541. }}
  542. />
  543. <Select
  544. placeholder="订单部门"
  545. style={{ width: 190, marginRight: 10 }}
  546. value={searchValues["depId"]
  547. ? searchValues["depId"]
  548. : undefined}
  549. onChange={(e) => {
  550. searchValues["depId"] = e;
  551. this.setState({
  552. searchValues: searchValues,
  553. });
  554. }}
  555. >
  556. {departmentArr.map(function (item) {
  557. return (
  558. <Select.Option key={item.id}>{item.name}</Select.Option>
  559. );
  560. })}
  561. </Select>
  562. <Input
  563. placeholder="合同编号"
  564. value={searchValues["contractNo"]
  565. ? searchValues["contractNo"]
  566. : ""}
  567. onChange={(e) => {
  568. searchValues["contractNo"] = e.target.value;
  569. this.setState({
  570. searchValues: searchValues,
  571. });
  572. }}
  573. />
  574. <AutoComplete
  575. className="certain-category-search"
  576. dropdownClassName="certain-category-search-dropdown"
  577. dropdownMatchSelectWidth={false}
  578. style={{ width: "120px" }}
  579. dataSource={options}
  580. placeholder="订单负责人"
  581. value={searchValues.aname || undefined}
  582. onChange={this.followUp.bind(this)}
  583. filterOption={true}
  584. onSelect={this.selectF.bind(this)}
  585. >
  586. <Input />
  587. </AutoComplete>
  588. <Input
  589. placeholder="项目名称"
  590. value={searchValues["projectName"]
  591. ? searchValues["projectName"]
  592. : ""}
  593. onChange={(e) => {
  594. searchValues["projectName"] = e.target.value;
  595. this.setState({
  596. searchValues: searchValues,
  597. });
  598. }}
  599. />
  600. <Select
  601. style={{ width: 120 }}
  602. placeholder="签单金额"
  603. value={searchValues["amountStatus"]
  604. ? searchValues["amountStatus"]
  605. : undefined}
  606. onChange={(e) => {
  607. searchValues["amountStatus"] = e;
  608. this.setState({
  609. searchValues: searchValues,
  610. });
  611. }}
  612. >
  613. <Option value="0">10万元以下</Option>
  614. <Option value="1">10~20万元</Option>
  615. <Option value="2">20~30万元</Option>
  616. <Option value="3">30~40万元</Option>
  617. <Option value="4">40万元以上</Option>
  618. </Select>
  619. <Select
  620. style={{ width: 120 }}
  621. placeholder="特批状态"
  622. value={searchValues["approval"]
  623. ? searchValues["approval"]
  624. : undefined}
  625. onChange={(e) => {
  626. searchValues["approval"] = e;
  627. this.setState({
  628. searchValues: searchValues,
  629. });
  630. }}
  631. >
  632. <Option value="0">非特批</Option>
  633. <Option value="1">特批待审</Option>
  634. <Option value="2">特批通过</Option>
  635. <Option value="4">全部特批</Option>
  636. </Select>
  637. <Select
  638. style={{ width: 120 }}
  639. placeholder="审核状态"
  640. value={searchValues["status"]
  641. ? searchValues["status"]
  642. : undefined}
  643. onChange={(e) => {
  644. searchValues["status"] = e;
  645. this.setState({
  646. searchValues: searchValues,
  647. });
  648. }}
  649. >
  650. <Option value="1">财务审核</Option>
  651. <Option value="2">特批审核</Option>
  652. <Option value="3">通过</Option>
  653. <Option value="4">驳回</Option>
  654. <Option value="5">全部</Option>
  655. </Select>
  656. <Button
  657. type="primary"
  658. onClick={this.search}
  659. style={{ marginLeft: 10 }}
  660. disabled={this.state.loading ? true : false}
  661. >
  662. 搜索
  663. </Button>
  664. <Button onClick={this.reset}>重置</Button>
  665. </div>
  666. </TabPane>
  667. <TabPane tab="打印" key="3">
  668. <Button
  669. type="primary"
  670. style={{ margin: "11px 0px 10px 10px" }}
  671. onClick={this.printAll}
  672. >
  673. 打印当前列表
  674. </Button>
  675. </TabPane>
  676. <TabPane tab="导出Excel" key="4">
  677. <Button
  678. type="primary"
  679. style={{ margin: "11px 0px 10px 10px" }}
  680. onClick={this.exportAll}
  681. >
  682. 导出当前列表
  683. </Button>
  684. </TabPane>
  685. </Tabs>
  686. <div className="patent-table">
  687. <Spin spinning={this.state.loading}>
  688. <Table
  689. bordered
  690. columns={
  691. this.state.changeList == undefined
  692. ? this.state.columns
  693. : this.state.changeList
  694. }
  695. dataSource={this.state.dataSource}
  696. pagination={this.state.pagination}
  697. onRowDoubleClick={this.tableRowClick.bind(this)}
  698. size="small"
  699. />
  700. </Spin>
  701. </div>
  702. <textarea id="copyText" style={{ opacity: 0 }} />
  703. {/* 订单详情 */}
  704. <OrderDesc
  705. data={this.state.RowData}
  706. showDesc={this.state.showDesc}
  707. closeDesc={this.closeDesc.bind(this)}
  708. />
  709. {
  710. //打印预览
  711. this.state.dvisible &&
  712. <Modal
  713. visible={this.state.dvisible}
  714. footer=""
  715. title="所有列表信息"
  716. className="admin-desc-content"
  717. width="1300px"
  718. onCancel={() => {
  719. this.loadData();
  720. this.setState({
  721. dvisible: false,
  722. });
  723. }}
  724. >
  725. <Spin spinning={this.state.loading}>
  726. <div
  727. className="patent-table"
  728. style={{
  729. padding: "25px 0 30px 30px",
  730. }}
  731. ref={(e) => {
  732. this.refs.all = e;
  733. }}
  734. >
  735. <Table
  736. columns={this.truncate(this.state.columns)}
  737. dataSource={this.state.dataSource}
  738. pagination={false}
  739. bordered
  740. size="small"
  741. />
  742. </div>
  743. </Spin>
  744. <ReactToPrint
  745. trigger={() => (
  746. <Button
  747. type="primary"
  748. style={{
  749. float: "right",
  750. marginTop: 10,
  751. position: "absolute",
  752. top: 0,
  753. right: 30,
  754. }}
  755. >
  756. 打印
  757. </Button>
  758. )}
  759. content={() => this.refs.all}
  760. />
  761. </Modal>
  762. }
  763. {
  764. // 会员项目添加编辑
  765. this.state.vipVisible &&
  766. <ProjectOperationVip
  767. readOnly={false}
  768. orderNo={this.state.dataInfor.orderNo}
  769. visible={this.state.vipVisible}
  770. dataInfor={this.state.dataInfor}
  771. onCancel={this.vipClose}
  772. />
  773. }
  774. </div>
  775. );
  776. },
  777. });
  778. export default MyProjectVip;