myprojectvip.jsx 22 KB

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