myprojectvip.jsx 23 KB

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