myprojectvip.jsx 23 KB

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