myprojectvip.jsx 23 KB

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