projectvipall.jsx 22 KB

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